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)
})
})
Related
I'm building a component library based on Vuetify.
Vuetify installation tells people to add this line
new Vue({
vuetify,
render: h => h(App)
}).$mount('#app')
However, I want people to be able to just import my component.
It looks like this
<template>
<HelloWorld />
</template>
<script>
import { HelloWorld } from "MyComponentLibrary";
export default {
components: {
HelloWorld,
},
};
</script>
Now, if this line of Vuetify is necessary...
new Vue({
vuetify,
});
I will have to make my component library API looks like this
import { reExportedVuetify } from "MyComponentLibrary";
new Vue({
vuetify: reExportedVuetify,
});
So, what does new Vue({ vuetify }) do?
Why is this Vue template rendering? h(App2), but App2 does not exists? What is wrong? Thanks a lot for your help.
index.html
<body>
<div id="app"></div>
</body>
App0.vue
<template>
<div>
Hi there!
</div>
</template>
<script>
export default {
name: "App1"
}
</script>
main.js
import Vue from 'vue';
import App2 from './App0';
new Vue({
el: '#app',
render: h => h(App2)
});
Just add components option:
new Vue({
el: '#app',
components: { App2 },
render: h => h(App2)
});
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')
This must be simple, but haven't cracked it...
In vue, I think I get how to pass props from parent to child components. And I understand that I have an app state in the data member of the vue instance. What I don't understand is how to get the data state into the root app as props.
It seems there are a few ways to organize a vue app, so here's what I'm trying to make work:
index.ts
import app from './app.vue'
export default new Vue({
// App Root Element
el: '#app',
render: (c) => c('app'),
components: {
app
},
data: {
someValue: 42
}
})
app.vue
<template>
<div>
Some Value: {{someValue}}
</div>
</template>
<script lang="ts">
export default {
props: ['someValue']
};
</script>
I assume it should be something like the following, but I don't know how to get a reference directly to the data - unless I keep a reference to it outside of vue for this purpose, but that seems like it should not be necessary:
render: (c) => c('app', { someValue: ??? }),
Use this to get data or property values inside your render method (or methods or computed values, etc). Don't use an arrow function to define your render function if you're going to use this inside it.
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
Example.
console.clear()
const app = {
props: ["someValue"],
template: `<div>Some Value: {{someValue}}</div>`
}
new Vue({
el: "#app",
render(c) {
return c('app', {props:{someValue: this.someValue}})
},
components: {
app
},
data: {
someValue: 42
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
</div>
As #RoyJ pointed out, this is the key section of the documentation.
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
}
})