If I were to have:
<div id="app" data-user="testing"></div>`
and after mounting the vue app on #app, I get this:
<div data-app="true" class="v-application v-application--is-ltr theme--light" id="app">
How can I access/preserve the data-user value to use in my app later?
Ok, so I figured it out.
If anyone else runs into this, here is how I solved it
new Vue({
vuetify,
store,
render: h => h(App),
data: {
user: ''
},
beforeMount() { this.user = this.$el.dataset.user } <--- ADD THIS TO SET THE VALUE
}).$mount('#app')
Related
I am starting to learn Vue.js by creating a simple project - I am creating this simple app where I want to list many todo list items.
My html structure would be something like this:
<div id="todo-list-1" class="todo-list"></div>
<div id="todo-list-2" class="todo-list"></div>
<div id="todo-list-3" class="todo-list"></div>
and my main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#todo-list-1',
render: h => h(App)
})
App.vue
<template>
<div>
<h2>Vue Test</h2>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
how can I iterate through my elements dynamically so I dont have to create them manually?
new Vue({
el: '#todo-list-1',
render: h => h(App)
})
new Vue({
el: '#todo-list-2',
render: h => h(App)
})
new Vue({
el: '#todo-list-3',
render: h => h(App)
})
I want to create one template but render different lists for my todo list. I cant have one id class "app", I want to have multiple instance of these so I can use them in different places with different data.
You can use querySelectorAll to loop over you lists and define new Vue instance
document.querySelectorAll('.todo-list').forEach(list => {
new Vue({
el: `#${list.id}`,
render: h => h(App)
})
})
I do not get vue components really .... I have a vue component in my html and want to show it, but it does not show anything, what do I do wrong?
What is the proper way to register and show a component in vue? Can someone give me a simple example for a beginner? :)
This is my code:
HTML
<div id="na-vue-app">
<activity-filter>
<template>
'Some Text'
</template>
</activity-filter>
</div>
Vue
new Vue({
el: '#na-vue-app'
});
const filterActivity = Vue.extend({
data: function () {
return {
distance:100,
}
},
mounted() {
},
methods: {
}
});
Vue.component('activity-filter', filterActivity);
Look at this pen: https://codepen.io/Nartub600/pen/oopBYJ
HTML
<div id="app">
<my-component msg="Hi!">
</my-component>
</div>
JS
Vue.component('my-component', {
props: ['msg'],
template: '<p>{{ msg }}</p>'
})
var app = new Vue({
el: '#app'
})
It's the easiest form to try components I think
Everything is fine in my main.js
import User from './components/User.vue'
new Vue({
el: '#user',
render: h => h(User),
data() {
return {
groups: []
}
},
mounted() {
this.getGroups();
},
methods: {
getGroups: function () {
axios.get('http://vagrant.dev/groups')
.then(response => this.groups = response.data)
.catch(error => console.log(error));
}
}
});
User.vue
<template>
<div id="user">
{{groups}} <!-- must be printed but it doesn't seem -->
</div>
</template>
<script>
export default {
name: 'user',
props: ['groups']
}
</script>
and index.html
<div id="user">
<user :groups="groups"></user>
</div>
Where is the mistake?
I do not get any errors, but I didn't understand why the value was not printed on the screen
Seems like you are putting 2 Vue instances on the same template since in your main file you are defining the template as el: "#user" which is already controlled by User.vue.
In you index.html add a div with id="app" and in main.js set el: "#app"
Your main.js and index.html shouldn't mix template in HTML and render function. So your main.js should be:
```new Vue({
el: '#user',
components: { User },
data() {
return {
groups: []
}
},
...```
You shouldn't directly reassign data value because Vue cannot detect property additions and rerender view. You should do it via Vue.set or this.$set like this:
this.$set(this, 'groups', response.data)
You can read more about how vue reactive in https://v2.vuejs.org/v2/guide/reactivity.html and Vue.set API: https://v2.vuejs.org/v2/api/#Vue-set
Full code: https://github.com/kenpeter/test_vue_template
git clone https://github.com/kenpeter/test_vue_template
install: yarn install
run: yarn dev
visit localhost:8080 and see nothing
Because you didn't render anything in your root component.
In your index.html, render the app component:
<div id="app">
<app></app>
</div>
There are several ways to do this. If you don't want to touch your index.html, you can also modify the main.js. All of the code below should work:
new Vue({
el: '#app',
render: h => h(App),
components: {
App
}
})
or
new Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
js 2.0 and I'm stock in dynamic props.
See Image attached
My HTML code like this:
<div id="app">
<div>
<input v-model="parentMsg">
<br>
<child v-bind:my-message="parentMsg"></child>
</div>
</div>
My Component code:
Vue.component('child', {
props: ['myMessage'],
template: '<p>{{ myMessage }}</p>',
})
var app = new Vue({
el: "#app",
});
I know that data should be a function but how I'm going to implement it. I get this error on the console.
Property or method "parentMsg" is not defined on the instance but referenced during render
I think message is clear. "parentMsg" is not defined on the instance. You have to define parentMsg at parent level. like following:
var app = new Vue({
data: {
"parentMsg": ""
}
el: "#app"
});
You can have a working fiddle here.