Menu
I have a list of objects. Each object contains a type field that is used to determine the component that is needed to be rendered. For example, for paragraph type I would need to render a component named Paragraph. I have roughly a dozen of these different component types.
At the moment I loop through the list in Javascript. I create a div with a random ID and replace that with a Vue component that I create manually using new [ComponentType]({ el: ... }). However, this requires DOM manipulation. Is there a better way that doesn't require manual manipulation of the DOM structure? v-for or similar?
878
Each Vue component implements a render function. Most of the time, the function will be created by the Vue compiler. When you specify a template on your component, the content of this template will be processed by the Vue compiler that will return a render function.
List rendering is one of the most commonly used practices in front-end web development. Dynamic list rendering is often used to present a series of similarly grouped information in a concise and friendly format to the user.
Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!
Components in Vue are composed of three parts; a template (which is like HTML), styles and JavaScript. These can be split into multiple files or the same .
Yes there is a better way. Use Dynamic Components.
Here's an example shown in those docs.
var vm = new Vue({
el: '#example',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component v-bind:is="currentView">
<!-- component changes when vm.currentView changes! -->
</component>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
