I am encountering an issue with accessing the object ID when I click on the edit or delete buttons in my CRUD operation. The event.target is returning the values of the edit and delete buttons instead.
This is what my HTML template looks like:
<div>
<input type="text" name="Memo title" placeholder="Write here your MEMO"
maxlength="27" v-model="writeMemo">
<textarea cols="25" rows="5" maxlength="280" v-model="writeMemoBody">
</textarea>
</div>
<button @click="createMemit">MEM-it</button>
--------------------------------etc-----------------------------------------------------
<div v-for="(memit) in memits" :key='memit.id' class="mem-it">
<div>
<h3>{{ memit.title }}</h3>
<p>{{ memit.body }}</p>
<button @click="editMemit">Edit</button>
<button @click.capture="deleteMemit($event)">X</button>
</div>
</div>
This is how I create a "memit":
data(){
return{
writeMemo: "",
writeMemoBody: "",
memits: [],
}
},
methods: {
createMemit() {
this.memits.push({
id: Math.random(),
title:this.writeMemo,
body:this.writeMemoBody
});
this.writeMemo='';
this.writeMemoBody='';
localStorage.setItem('old-memits',JSON.stringify(this.memits));
}
}