在Vue中进行突变后，嵌套对象未定义

Question

所以我正在用v-for遍历一个列表。每个对象都包含一个嵌套对象。每个列表由一个键过滤。 v-for的效果很好，直到我进行了使列表发生变化的更新。 v-for列表看起来像这样

<tbody>
   <tr v-for="(engagement, index) in filteredEngagements" :key="index" v-if="engagement.workflow_id === selectedWorkflowID">
   <th scope="row"><input type="checkbox" :value="engagement.id" v-model="checkedEngagements.engagements"></th>
   <th>{{ engagement.client.last_name}}, {{ engagement.client.first_name}} & {{ engagement.client.spouse_first_name}}</th>
   <td>{{ engagement.status }}</td>
   <td>{{ engagement.assigned_to }}</td>
   <td>{{ engagement.return_type }}</td>
   <td>{{ engagement.year }}</td>
  </tr>
</tbody>

我的麻烦是这条线

<th>{{ engagement.client.last_name}}, {{ engagement.client.first_name}} & {{ engagement.client.spouse_first_name}}</th>

因此，列表由我计算出的filteredEngagements过滤，该getter使用engagementFilterKey作为数据，而 computed: { ...mapGetters(['allEngagements', 'users', 'allWorkflows']), filteredEngagements () { return this.allEngagements.filter((engagement) => engagement.status === this.engagementFilterKey) .filter( engagement => { return !this.searchEngagement || engagement.client.last_name.toLowerCase().indexOf(this.searchEngagement.toLowerCase()) >= 0 }); }, }, 作为正确的关键字进行过滤

updateCheckedEngagements(state, updatedEngagements = []) {
  const ids = updatedEngagements.map(engagement => engagement.id)
  state.engagements = state.engagements.map(engagement => {
  const matchedIndex = ids.indexOf(engagement.id)
   if(matchedIndex !== -1) {
    return{
      ...updatedEngagements[matchedIndex] 
    } 
   }
   return engagement
   })
  },

我的变异看起来像这样

const getValidPets = async (pets) => {
    const petsArray = pets.map(async (pet) => {
      try {
        const record = await getPetHttp(pet);
        return record.name;
      } catch (error) {
        return undefined;
      }
    });
    return Promise.all(petsArray).then((filteredPets) => {
      const arr = filteredPets.filter(petName => petName !== undefined);
      return arr; // ["Rex", "Jug"] - here is correct!
    });
};

const pets = ["Rex", "Jug", "some_wrong_name"];
const finalPets = await getValidPets(pets); // undefined - incorrect

因此，一旦通过突变更新了列表，就无法使用更新列表的键来过滤列表，但是如果刷新页面或只是单击其他键选项之一，则过滤后的列表仍然可以正常工作。

例如，请查看JS Fiddle。 请注意，jsfiddle设置为一次仅更改1个对象，但是它确实复制了我在设置中收到的警报。再次问题是我更新了对象的状态，然后尝试单击对象已更新到的状态后，这使我产生警报，说嵌套对象的属性未定义...