Here is the HTML code snippet:
<div v-for="item in my_items">
<div>
<input type="text" :value=item.name />
</div>
<div>
<button @click="edit(item.id, item.name)">Edit</button>
</div>
</div>
This is the associated JavaScript code:
export default {
data() {
return {
my_items: []
}
},
methods: {
async edit(id, name){
console.log("edit", id);
console.log("name", name);
},
},
async mounted() {
this.my_items = [
{id: 1, name: 'name1'}
,{id: 2, name: 'name2'}
];
}
}
When the component is mounted, two rows will be displayed with names "name1" and "name2". Each row has an edit button attached to it. If you change the input field value and then click on the edit button, the console still displays the "old" name for the variable. How can you access the current value in the input field from the "edit()" function?