Vue 2-子组件道具数组在父项删除后不更新。

Question

我尝试调试这个问题已经有一段时间了。每当我从父节点中删除疫苗时--子组件不会从视图中删除该项(我验证了索引并在父目录中记录了疫苗数组--记录了正确的数组长度，包括已删除的项)。但是，子组件不会从vue中删除已删除的项。我还试图从DB中重新获取疫苗，但仍然无法更新视图

有趣的是，当我创建一个新的疫苗(post API)并重新获取值-疫苗项目填充子表没有任何问题。同样，这种情况只发生在delete中。

我尝试过将疫苗道具设置为数据(重命名为vaccineItems)，但这似乎仍然没有使vaccineItems产生反应性。我也知道不鼓励使用$set。

任何帮助都要事先表示感谢和感谢。父组件

疫苗抽屉(父母)

 <VaccineTable
    :vaccines="vaccines"
     @deleteVaccine="openDeleteConfirmModal"
 />

疫苗抽屉(家长)删除方法

    deleteVaccineSuccess(index) {
        this.vaccineToDelete = null;
        this.vaccines.splice(index, 1) // this is the correct index
        console.log(this.vaccines) // correctly logs the array of vaccine including the deleted item      
     }

..。疫苗表(儿童)

...
   <div class="dod-table-row" :key="vaccine.uuid" v-for="(vaccine, index) in vaccines">
       {{vaccine.name}}...
    <button @click="deleteVaccine(vaccine, index)">Delete</button>


   </div>

const Name = 'VaccineTable';

const props = {
    vaccines: {
        type: Array,
        required: true,
    },
    vaccineStatus: Number,
    required: true,
    ....
    methods = {    
      deleteVaccine(vaccine, index) {
        this.$emit('deleteVaccine', vaccine, index);
    },

};

Answer 1

道具总是有反应的。因此，父母所做的任何改变/修改也会反映在孩子身上。

您的代码看起来只是正确的，它应该可以工作，我只是创建了一个简单的代码片段供您参考。请看一看，找出根本原因。

​

Vue.component('vaccinetable', {
  props: ['vaccines'],
  template: `<div><div v-for="(vaccine, index) in vaccines" :key="index">
       {{vaccine}}
    <button @click="deleteVaccine(index)">Delete</button>
   </div></div>`,
   methods: {
    deleteVaccine(index) {
        this.$emit('delete-vaccine', index);
    }
   }
});

var app = new Vue({
  el: '#app',
  data: {
    vaccines: ['Vaccine 1', 'Vaccine 2', 'Vaccine 3', 'Vaccine 4', 'Vaccine 5']
  },
  methods: {
    deleteVaccine(index) {
        this.vaccines.splice(index, 1);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <VaccineTable :vaccines="vaccines" @delete-vaccine="deleteVaccine">
  </VaccineTable>
</div>

​

Answer 2

因为你在父母创建后改变了数据疫苗(我猜)，

@Rohμt Jíndal的演示之所以有效，是因为数据没有变化。

在vue2中，您应该使用以下方法更改数组：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

但

vm.items.length = newLength,
vm.items[indexOfItem] = newValue

不能观察，https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection