Problem with checking ID in filter function inside a method - vue.js

Question

I work on CRUD based on Vuejs. I have three components Goods.vue, UpdateGood.vue, App.vue
My Problem is in the "updateGood" method inside App.vue . I have to click the "update" button twice to update my current good item in table.
First click is for filter function to get the current item.
Second click is for splice function to replace updated item with old one. I want to implement the filter function in my editGood() method for getting the id of current item, but don't know how to do it.
I tried to set the filter function in editGood() method where I take current object by clicking the button
App.vue file:
template:
<template>
<div id="app">
<!-- Component for adding a good -->
<AddGood v-on:add-good="addGood"/>
<!-- Component for managing goods in table -->
<Goods v-bind:goods="goods" v-on:del-good="deleteGood" v-on:edit-good="editGood"/>
<UpdateGood v-bind:good="goodToUpdate" v-on:update-good="updateGood" />
</div>
</template>
script:
import Goods from './components/Goods.vue';
import AddGood from './components/AddGood.vue';
import UpdateGood from './components/UpdateGood.vue';
methods : {
addGood(newGood){
this.goods = [...this.goods,newGood];
},
deleteGood(id){
this.goods = this.goods.filter(good => good.id !== id);
},
editGood(good){
this.goodToUpdate = Object.assign({}, good);
},
updateGood(updatedGood){
// Creating new array with only one object inside
e
let goodOriginalIndex = this.goods.indexOf(goodOriginalObject[0]);
this.goods.splice(goodOriginalIndex, 1, updatedGood);
alert("Js"+JSON.stringify(updatedGood));
}
}
Goods.vue:
<tr v-bind:key="good.id" v-for="good in goods"
v-on:del-good="$emit('del-good',good)">
<td>{{good.id}}</td>
<td>{{good.date}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td>{{good.amount}}</td>
<td>{{good.sum}}</td>
<td><input type="submit" value="Удалить"
#click="$emit('del-good',good.id)"/></td>
<td><input type="submit" value="Изменить"
#click="$emit('edit-good',good)"/></td>
</tr>
UpdateGood.vue
template:
<div class="form-style-6">
<h1>Текущий Товар</h1>
<form #submit="updateGood">
<input type="text" v-model="good.id" placeholder="Артикул" />
<input type="text" v-model="good.date" placeholder="Дата Поступления" />
<input type="text" v-model="good.name" placeholder="Название" />
<input type="text" v-model="good.price" placeholder="Цена" />
<input type="text" v-model="good.amount" placeholder="Количество" />
<input type="text" v-model="good.sum" placeholder="Сумма" />
<input type="submit" value="Обновить" class="btn" />
</form>
</div>
script:
<script>
export default {
name : 'UpdateGood',
props: ["good"],
methods : {
updateGood: function(e){
e.preventDefault();
// Send up to parent
this.$emit('update-good', this.good);
}
}
}
</script>
I have to get the id of object in the editGood() method which pass this id to updateGood() function where splice is impelemented.

Answer 1

You can use watch function to subscribe when goodToUpdate object was updated and call updateGood function after that.
// your main component
{
methods: {
updateGood(updatedGood){
// Creating new array with only one object inside
let goodOriginalIndex = this.goods.indexOf(goodOriginalObject[0]);
this.goods.splice(goodOriginalIndex, 1, updatedGood);
alert("Js"+JSON.stringify(updatedGood));
this.goodToUpdate = null // reset after update
// if you just want to replace the old good by the new good, you can use map
this.goods = this.goods.map(good => good.id === updatedGood.id ? updatedGood : good )
},
...
},
watch: {
// whenever question changes, this function will run
goodToUpdate: function (newGood, oldGood) {
if(newGood){
this.updateGood(newGood)
}
}
},
}