0

Estou utilizando a pergunta abaixo pra ilustrar melhor minha dúvida.

Vue não está renderizando tabela com v-for, como resolver?

Como eu faço pra fazer a mesma coisa? Só que exibindo uma listagem, usando componente, mas ao invés de um usar um array de objetos, quero usar um array simples, como:

produtos = ['tv','computador','celular']

Observação: ainda estou aprendendo a usar o StackOverflow, não sei se estou fazendo da melhor forma, usando a referência desse modo.

1 Resposta 1

2

Para imprimir uma lista de um array com uma dimensão é da mesma forma que imprimir um array de objetos, exemplo:

Exemplo simples:

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>

Exemplo com componente:

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>

Leitura:

Outros exemplos de código:

3
  • Dessa forma eu entendo, mas queria saber como faço pra exibir usando um componente. Commented 21/11/2020 às 14:03
  • 1
    da mesma forma não tem diferença quando tem um componente porque se vai passar via props vou colocar outro exemplo
    – novic
    Commented 21/11/2020 às 14:05
  • 1
    Fiz o exemplo com componente simples @GustavoRodrigues, como você não tem um foco especifico é criado um exemplo minimo
    – novic
    Commented 21/11/2020 às 14:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .