0
I’m using the question below to better illustrate my question.
Vue is not rendering table with v-for, how to solve?
How do I do the same thing? Only by displaying a listing, using a component, but instead using a array of objects, I want to use a array simple, like:
produtos = ['tv','computador','celular']
Observing: I’m still learning to use the Stackoverflow, I don’t know if I’m doing it right, using the reference that way.
2
To print a list of a array with one dimension is in the same way as printing a array of objects, example:
Simple example:
Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
el: '#editor',
data: {
produtos: ['tv','computador','celular']
},
methods: {
addUser: function() {
console.log('clicado');
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="editor">
<ul>
<li v-for="produto in produtos">{{produto}}</li>
</ul>
</div>Example with component:
Vue.config.devtools = false;
Vue.config.productionTip = false;
Vue.component('list-product', {
props: ['produto'],
template: '<li>{{ produto }}</li>'
})
new Vue({
el: '#editor',
data: {
produtos: ['tv','computador','celular']
},
methods: {
addUser: function() {
console.log('clicado');
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="editor">
<ul>
<list-product
v-bind:key="produto"
v-for="produto in produtos"
v-bind:produto="produto"></list-product>
</ul>
</div>Reading:
Other examples of code:
Browser other questions tagged array vue.js for component
You are not signed in. Login or sign up in order to post.
That way I understand, but I wanted to know how to display using a component.
– Gustavo Rodrigues
likewise no difference when it has a component because it will pass via
propsI’ll put another example– novic
I made the example with simple component @Gustavorodrigues, as you do not have a specific focus is created a minimal example
– novic