0

Tengo un componente vue el cual tiene una tabla con varios objetos tipo Persona; todo trabaja perfecto, pero en el botón Consultar o Editar de cada fila (Se supone que debería direccionar a la consulta o edición de dicha persona) no se como pasar la variable en el botón, no se como se debe manejar el sintaxis al pasar variables vue mediante href u onclick

<table v-show="table" class="table  table-bordered  table-sm  table-light  text-center">
      <thead>
            <tr class="bg-primary">
                  <th>Documento</th>
                  <th>Nombre</th>
                  <th>Apellido</th>
                  <th scope="col" colspan="2">Acciones</th>
            </tr>
       </thead>
       <tbody>
             <tr v-for="person in people">
                  <td>{{person.documento}}</td>
                  <td>{{person.nombre}}</td>
                  <td>{{person.apellido}}</td>
                  <td>
                        <button onclick="window.location='./properties/'+ person.documento +'/edit'" class="btn btn-primary">Consultar</button>
                  </td>
             </tr>
        </tbody>
  </table>
2
  • no usas un router no?
    – gbianchi
    el 27 feb. 2019 a las 16:44
  • pero ya le estas pasando un parametro (person.documento). El resto es concatenar y armar el query string de la misma forma...
    – gbianchi
    el 27 feb. 2019 a las 16:45

1 respuesta 1

0

Puedes hacer lo siguiente:

En el prop de tu componente declarar una variable tipo función, algo asi:

btnEditar: {
  type: Function,
  default: () => false
},

Ahora en tu vista principal donde estas llamando a tu componente algo así:

<my-component btn-editar="MyFunction"></my-component>

Para pasarle los datos de la persona a esa función

<tr v-for="person in people">
  <td>{{person.documento}}</td>
  <td>{{person.nombre}}</td>
  <td>{{person.apellido}}</td>
  <td>
     <button @click="btnEditar(person)">Consultar</button>
  </td>
</tr>

En el método de tu vista principal

methods:{
   MyFunction: function(item){
      console.log(item)
   }
}
3
  • No entiendo esta respuesta. Mas alla de que es una pregunta con un par de semanas, y OP no se digno a contestar los comentarios, me parece que no tiene nada que ver con lo que se pide. Para que le pasas una funcion a un hijo?
    – gbianchi
    el 14 mar. 2019 a las 15:21
  • Es una forma para que pueda editar si el botón esta en el componente y traer los datos al padre. el 14 mar. 2019 a las 15:35
  • No entiendo el sentido.. eso suena mas a react que a vue. No es incorrecto, solo no entiendo el sentido.
    – gbianchi
    el 14 mar. 2019 a las 15:40

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.