update with Vue.js

Question

This is the code of my Component Listproducts.I was wondering how I can pass an id through the change button for when I create my Updateproducts.Pull the data that will be changed and then make the change in the database. My deleting method is inside the Listproducts System, but Update I thought about doing it in another System because I will need a form to edit the data. How can I send the data to my Component Update, how do I call Component on the screen later? Thanks in advance.

<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);
    })
  },

}
}

Answer 1

In the documentation of router-link the example that applies to your case is:

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

so you can pass props for component and component uses

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