I am working on a web app that uses Django for the backend and Vue.js for the frontend. Each row in a table has a button that is intended to display detailed information about that specific row when clicked. I am trying to pass certain variables from a row in Vue.js as parameters to a Vue.js method.
However, I have encountered an issue where every time I click the button, the form gets submitted even though I have already set the type to "button".
<tbody>
<tr v-for="(row, index) in filteredRows" :key="`isbn-${index}`">
<td name="`title_${index}`" v-html="highlightMatches(row.title)">{{ row.title }}</td>
<td v-html="highlightMatches(row.author)">{{ row.author }}</td>
<td><button type="button" v-on:click="greet( $event, {{ row.title }})">Greet</button></td>
<td name="`discipline_code_course_code_${index}`" bgcolor= "white"><div contenteditable></div></td>
</tr>
</tbody>
<script>
const app = new Vue({
el: '#app',
data:() => ({
filter: '',
rows: book_rows
}),
methods: {
greet: function (event, title) {
alert(title); #undefined when debug
this.$http.post(
'/check_code/',
{ title: title }
);
}
},
</script>
What is the best way to pass values from a row in Vue.js as parameters to a Vue.js method and then send them out using axios?