0

Este é o codigo do meu component ListProducts.vue eu queria saber como posso passar um id pelo botão alterar pra quando eu criar o meu UpdateProducts.vue puxar os dados que vão ser alterados e depois fazer a alteração no banco. O meu método deletar está dentro do component ListProducts, mas o Update eu pensei em fazer em outro component pois vou precisar de um form pra editar os dados. Como posso enviar os dados pro meu component Update, como faço pra chamar o component na tela depois? Agradeço desde já.

<template>
  <table>
  <tr>
      <th>Nome</th>
      <th>Código de Barras</th>
      <th>Quantidade em estoque</th>
      <th>Valor unitário</th>
      <th>Ações</th>
  </tr>
  <tr v-for="prod in produtos" :key="prod.nome">
      <td>{{prod.nome}}</td>
      <td>{{prod.codigoDeBarra}}</td>
      <td>{{prod.estoque}}</td>
      <td>{{prod.valorUn}}</td>
      <th>
          <router-link to="/alterarProduto" tag="button" 
          style="width: 40%; height: 50%; display: inline-block;"
          class="btn btn-primary btn-block btn-large">
          Alterar</router-link>

          <input type="button" value="Excluir" class="btn btn-primary btn-block btn-large"  
          style="width: 40%; height: 50%; display: inline-block;" v-on:click="deletar(prod)">
      </th>
  </tr>

    const url = "http://localhost:8080/produto"

    export default {


    data(){
       return{
           produtos:[]
       }
    },



   created: function() {
       this.$http.get(url).then(function(response){
           this.produtos = response.body;
       }, function(response){
           console.log("Nao funcionou")
       })
   },



   methods: {


       deletar: function (produtoExcluir){
         this.$http.delete("http://localhost:8080/produto/"+ produtoExcluir.produto_id).then(function(response){
      var indice = this.produtos.indexOf(produtoExcluir);

      this.produtos.splice(indice, 1);
    })
  },

}
}

1 Resposta 1

2

Na documentação do router-link o exemplo que se aplica ao teu caso é:

<router-link :to="{ path: 'alterarProduto', params: { productID: 123 }}">User</router-link>

assim podes passar props para o componente e no componente usas

props: {
    productID: {
        type: [Number, String],
        required: true
    }
}

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 .