在方法内的过滤器函数中检查 ID 的问题

Question

我在基于 Vuejs 的 CRUD 上工作。我有 Goods.vue、UpdateGood.vue、App.vue 三个组件 我的问题出在 App.vue 中的“updateGood”方法中。我必须点击两次“更新”按钮来更新我当前在表格中的好项目。 第一次单击是过滤功能以获取当前项目。 第二次点击是拼接功能，用旧的替换更新的项目。我想在我的 editGood() 方法中实现过滤器功能以获取当前项目的 id，但不知道该怎么做。

我尝试在 editGood() 方法中设置过滤器功能，通过单击按钮获取当前对象

App.vue 文件： 模板：

<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>

脚本：

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 模板：

<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>
export default {
    name : 'UpdateGood',
    props: ["good"],
    methods : {
        updateGood: function(e){
            e.preventDefault();

            // Send up to parent
            this.$emit('update-good', this.good);
        }
    }
}
</script>

我必须在 editGood() 方法中获取对象的 id，该方法将此 id 传递给执行 splice 的 updateGood() 函数。

Answer 1

您可以在goodToUpdate 对象更新时使用watch 函数订阅，然后调用updateGood 函数。

// 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)
      }
      
    }
  },
}