My Vue is not rendering the branches data property. How can I pass data from the root Vue to the Hello.vue component? I have tried v-bind and passdata but nothing seems to be working. Any help is highly appreciated.
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.use(require('vue-resource'))
var esquery = require('./query')
Vue.config.productionTip = false
/* eslint-disable no-new */
var app= new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
data: {
branches: ''
},
methods: {
search1: function () {
var self=this
alert('hi')
esquery.search().then(function(val){
self.branches=val.hits.hits[0]._source
alert(JSON.stringify(self.branches))
})
}
}
})
app.search1()
//alert (JSON.stringify(branches))
App.vue
<template>
<div id="app">
<router-view> </router-view>
</div>
</template>
<script>
export default {
name: 'app',
props: ['branches']
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Hello.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Design your application smartly</h2>
<table>
<tr> Branches </tr>
<td v-for="branch in branches" :branches="branches"> {{ branch.branchname }}</td>
</table>
</div>
</template>
<script>
export default {
name: 'hello',
props: ['branches'],
data () {
return {
msg: 'Welcome to Html'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
Related
I have a simple BootstrapVue table.
The css is defined in App.vue. Here's the code for App.vue.
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png"> -->
<TestTable msg="testing"/>
</div>
</template>
<script>
import TestTable from './components/TestTable.vue'
export default {
name: 'App',
components: {
TestTable
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Here's the code for TestTable.vue.
<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
}
</script>
The margin-top: 60px is defined in App.vue. I want to modify TableTest.vue such that it overrides the margin top in the CSS in App.vue. I want margin-top: 0px for TableTest.vue.
I am using Vue v2.6 and Bootstrap-vue.
I want to modify TableTest.vue such that it overrides the margin top in the CSS in App.vue
I earlier commented on your question that you applied margin-top: 60px in your parent component and child component is having its own box model.
Adding a code snippet to show how your component structured:
Vue.component('item', {
template:'#list-template',
props:['item'],
});
var vm = new Vue({
el:"#app",
computed: {
limitedItems() {
return ['item1'];
}
}
});
#app {
border: 2px solid black;
margin-top: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<item v-for="item in limitedItems" :item="item" style="border: 2px solid green"></item>
</div>
<template id="list-template">
<p>{{ item }}</p>
</template>
you can try margin-top: -60px;
Simply use
<style>
#app {
margin-top: 0;
}
</style>
In Your TestTable.vue file and it will overwrite the previous css rule given that both <style> tags are not scoped.
I created an empty vue3 project. And I created global.js to the public file.
global.js;
window.testPrint = "test message";
export default {}
vue.config.js;
// vue.config.js
/**
* #type {import('#vue/cli-service').ProjectOptions}
*/
module.exports = {
publicPath: "./"
};
App.vue;
<template>
<p>
{{getTest()}}
</p>
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</template>
<script>
export default {
methods: {
getTest() {
return window.testPrint;
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>
main.js;
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App).use(store).use(router).mount("#app");
import "../public/global.js";
On the screen output that I have built and run on iis, window.testPrint = "test message"; shaped. When I change this value in global.js and do Ctrl+F5, the screen does not change and still remains as "test message".
I'm working on a project with Vue3 to list all universities in Sweden and are having problems with RouterLink to take the user to an external page and the universities official webpage. Does any one have some tips to fix this problem?
This is my App.vue file:
<script>
import TheHeader from "./components/styling/TheHeader.vue";
import UniversityList from "./pages/universities/UniversityList.vue";
export default {
components: {
TheHeader,
UniversityList
}
}
</script>
<template>
<TheHeader />
<university-list v-for="res in universities"
:name="res.name"
:country="res.country"
:web_pages="res.web_pages"
></university-list>
<RouterView/>
</template>
<style>
#import url('https://fonts.googleapis.com/css2?family=Epilogue:wght#400;700&display=swap');
html {
font-family: 'Epilogue', sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
}
</style>
And this is UniversityList.vue
<template><ul>
<li v-for="university in universities">
<div class="info">
<h3>{{ university.name }}, {{ university.country }}</h3>
<RouterLink v-bind:to="university.web_pages">Källa</RouterLink>
</div>
</li>
</ul>
<RouterView/>
</template>
<script>
export default {
created() {
fetch('http://universities.hipolabs.com/search?country=Sweden')
.then((response) => response.json())
.then((result) => {
this.universities = result
})
},
data() {
return { universities: null}
},
props: ['name', 'country', 'web_pages']
}
</script>
<style>
body {
background-color: #dda15e;
}
.info {
max-width: 800px;
margin: 15px auto;
background: white;
border: 1px solid #424242;
border-radius: 12px;
padding-left: 20px;
}
h3 h4 {
margin: 1rem 0;
padding: 1rem;
}
</style>
Thanks in advance!
Router link only works in your project,
so you should use
anchor
You should just use anchor tag, RouterLink is for internal routes
I am using vue for solana development.
The library I use is #solana/wallet-adapter
error shows:
/node_modules/#toruslabs/eccrypto/index.js: 'return' outside of function
Since the example is only for React, it's hard for me to find the root cause of the error.
App.vue
<template>
<div id="app">
<WalletConnectButton/>
</div>
</template>
<script>
import { ConnectionProvider, WalletProvider } from '#solana/wallet-adapter-vue';
import { WalletAdapterNetwork } from '#solana/wallet-adapter-base';
import {
getLedgerWallet,
getPhantomWallet,
getSlopeWallet,
getSolflareWallet,
getSolletExtensionWallet,
getSolletWallet,
getTorusWallet,
} from '#solana/wallet-adapter-wallets';
import {
WalletDisconnectButton,
WalletMultiButton,
WalletConnectButton
} from '#solana/wallet-adapter-vue-ui';
import { clusterApiUrl } from '#solana/web3.js';
export default {
name: "App",
components: {
}
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Codesandbox
https://codesandbox.io/s/strange-oskar-j1byt?file=/src/App.vue:0-906
Im not sure if this helps or not, but maybe the module is missing.
npm i #toruslabs/eccrypto
in my dashboard,i am displaying cards with some content(title & body)and the data is coming from backend api and that data is stores in notes[] array that is present inside the DisplayNotes.vue ,and each card contains some icons if the user clicks on any card TRASH-icon(for example: 4th card delete icon),the particular clickedTrashIcon card data should be passed to the DeleteNote.vue component and the data is stored inside the array called Trash which is present inside the DeleteNote.vue component ,please help me to fix this thing
DeleteNote.vue
<template>
<div class="Trash-section">
<div v-for="item in Trash" :key="item.id" class="container note">
<div class="delete-content">
<h5>{{item.title}}</h5>
<p>{{item.body}}</p>
<div class="icons Trash-icons">
<i class="fas fa-trash"></i>
<i class="fas fa-trash-restore"></i>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DeleteNote',
data() {
return {
Trash: [{
id: 1,
title: 'Fundoo',
body: 'Trash component'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
{
id: 2,
title: 'second',
body: 'trash'
},
]
}
}
}
</script>
<style scoped>
.icons {
margin-top: 12.2%;
margin-left: 5%;
opacity: 0.9;
}
.icons .fa-trash-restore {
padding-left: 25px;
}
.icons .fa-trash:hover {
font-size: 20px;
cursor: pointer;
}
.Trash-section {
margin-top: 5%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: space-around;
gap: 10px;
}
.container {
width: 22%;
margin-top: 5%;
margin-left: 18%;
margin-right: -15%;
box-shadow: 5px 5px 10px #e0dede;
float: left;
}
.container:hover {
box-shadow: 6px 6px 10px rgb(199, 199, 199);
}
h5 {
font-size: 20px;
font-weight: 400;
font-family: 'Times New Roman', Times, serif;
padding-left: 10px;
}
p {
font-size: 18px;
width: 90%;
height: 60px;
font-family: 'Times New Roman', Times, serif;
width: 100%;
padding: 7.5px 10px;
}
.Trash-icons {
visibility: hidden;
}
.note:hover .Trash-icons {
visibility: visible;
}
</style>
DisplayNotes.vue
<template>
<div class="carddisplay-section">
<div v-for="note in notes" :key="note.id" id="blur" class="container note">
<div #click="toggle(note.id)" class="card-content">
<h5>{{note.title}}</h5>
<p>{{note.body}}</p>
</div>
<div class="import-icons">
<icons class="imported-icons note-icons" />
<button v-if="flag" class="card-button" type="button" #click="handlesubmit();Togglebtn();">Close</button>
</div>
</div>
<div id="popup">
<UpdateNotes :cardId="clickedCard" :cardContent="cardContent" />
</div>
</div>
</template>
<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
name: 'DisplayNotes',
components: {
icons,
UpdateNotes
},
data() {
return {
flag: true,
notes: [{
id: 1,
title: 'Fundoo',
body: 'unlimited notes..'
}, ],
clickedCard: '',
cardContent: {},
}
},
methods: {
Togglebtn() {
this.flag = !this.flag;
},
async handlesubmit() {
service.userDisplayNotes().then(response => {
this.notes.push(...response.data);
})
},
toggle(id) {
var blur = document.getElementById('blur');
blur.classList.toggle('active');
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
var popup = document.getElementById('popup');
popup.classList.toggle('active');
},
}
}
</script>
<style lang="scss">
#import "#/styles/DisplayNotes.scss";
</style>
icons.vue
<template>
<div class="footer">
<i class="fas fa-bell"></i>
<i class="fas fa-user"></i>
<i class="fas fa-palette"></i>
<i clss="fas fa-image"></i>
<i class="fas fa-archive"></i>
<!-- <i class="fas fa-ellipsis-v"></i> -->
<i class="fas fa-trash"></i>
</div>
</template>
<style scoped>
.footer i {
opacity: 0.9;
position: relative;
}
.footer .fa-bell {
margin-top: 5px;
margin-left: 10px;
}
.footer .fa-user {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-palette {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-image {
margin-top: 5px;
margin-left: 40px;
}
.footer .fa-archive {
margin-top: 5px;
margin-left: 40px;
}
/* .footer .fa-ellipsis-v {
margin-top: 5px;
margin-left: 40px;
} */
.footer .fa-trash {
margin-top: 5px;
margin-left: 40px;
cursor:pointer;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
// import 'bootstrap/dist/css/bootstrap.min.css'
// import '#/assets/css/main.css'
//vuelidate
import vuelidate from 'vuelidate'
import 'bootstrap/dist/css/bootstrap.min.css'
import router from './router'
import './service/axios'
import store from './store';
// import ('./src/Styles/Forget.css')
Vue.config.productionTip = false
Vue.use(vuelidate)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
You should use Vuex for central state management. The workflow should be like this: you get the data from back-end via api and you store them in a array in your DisplayNotes.vue component and display them. Then you click on the trash icon in the card and get that values from your item from your array. You have to store "deleted item" values in vuex state variable via "Actions" and "Mutations" from vuex. For example "deletedItems". After you did it successfully, you can use "Getters" to get the values from your created variable in vuex store "deletedItems" in every component in your application.
Here is a quick example.
Install vuex at first and import them.
npm i vuex
create store.js file in the root folder of your application.
in your app.js or main.js etc. you have to import store.js file
import store from './store';
const app = new Vue({
el: '#app',
store,
render: r => r(App)
});
put this in your file store.js
import Vuex from 'vuex'
import Vue from 'vue'
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [createPersistedState({
storage: window.sessionStorage,
})],
state: {
deletedItems: [],
},
getters: {
deletedItems: state => {
return state.deletedItems
},
},
mutations: {
SET_DELETED_ITEMS(state, value) {
return state.deletedItems = value
},
},
actions: {
setDeletedItems({ commit }, value) {
commit('SET_DELETED_ITEMS', value);
},
},
});
To set values into a variable:
put this in vue component "DisplayNotes.vue
methods: {
deleteItem(){
this.$store.dispatch("setDeletedItems", itemValues);
}
}
To get values from vuex:
put this in your "DeletedNotes.vue"
import { mapState } from "vuex";
computed: {
...mapState(["deletedItems"]),
}
you can use them like:
console.log(this.deletedItems)
For more check this: https://vuex.vuejs.org/