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传递给在其中执行拼接的updateGood（）函数。

Answer 1

watch对象更新时，您可以使用goodToUpdate函数进行订阅，然后再调用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)
      }
      
    }
  },
}

在方法内部检查过滤器功能中的ID的问题

1 个答案: