Tengo una tabla que recorre los objetos del libro y escribe valores. Quiero agregar botones para editar y eliminar los objetos. ¿Cómo paso parámetros correctamente a los métodos?
Hasta ahora he probado esto:
<table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">Title</th> <th scope="col">Author</th> <th scope="col">Genre</th> <th scope="col">ISBN</th> <th scope="col">UDC</th> <th scope="col">Publisher</th> <th scope="col">Year Published</th> <th scope="col">Shelf Position</th> <th scope="col"></th> <th scope="col"></th> </tr> </thead> <tbody> <tr v-for="(book, i) in books" :key="i"> <th scope="row">{{ ++i }}</th> <td>{{ book.title }}</td> <td>{{ book.author }}</td> <td>{{ book.genre }}</td> <td>{{ book.isbn }}</td> <td>{{ book.udc }}</td> <td>{{ book.publisher }}</td> <td>{{ book.year_published }}</td> <td>{{ book.shelf_position }}</td> <td><button type="submit" class="btn btn-secondary" v-on:submit="this.edit(book.book_id)">Edit</button></td> <td><button type="submit" class="btn btn-secondary" onclick="this.delete('{{book.book_id}}')">Delete</button></td> </tr> </tbody> </table>He intentado dos formas diferentes, ambas mostradas arriba, pero no funciona. ¿Qué estoy haciendo mal?
Al hacer referencia a métodos/datos en plantillas en vue.js, no necesita usar this ; puede referirse a él directamente por su nombre. También debería usar v-on:click para escuchar los eventos. Entonces puedes cambiar esos botones a:
<td><button type="submit" class="btn btn-secondary" v-on:click="edit(book.book_id)">Edit</button></td> <td><button type="submit" class="btn btn-secondary" v-on:click="delete('{{book.book_id}}')">Delete</button></td> Esto debería funcionar siempre que la edit y la delete estén definidas en los métodos de su componente.
Use el detector de click sin configurar el tipo para submit :
<td><button class="btn btn-secondary" @click="edit(book.book_id)">Edit</button></td> <td><button class="btn btn-secondary" @click="delete(book.book_id)">Delete</button></td>Referencia: https://vuejs.org/v2/guide/events.html