Question

所以在使用更新的对象对数组进行变异后，我遇到了问题。为了提供见解，我有一个v-for循环遍历参与过滤的列表。过滤后的密钥基于状态。基本上，我可以单击状态名称，它仅显示与该键匹配的参与。我也可以选择使用复选框一次更新多个参与。一旦我提交了更新的对象（参与度）数组，然后尝试单击将参与度更新为的状态，就会收到警报，告诉我property last_name是未定义的，即使它是...

这是我要循环显示的状态列表

<ul v-for="workflow in allWorkflows" :key="workflow.id" v-if="workflow.id === selectedWorkflowID">
   <li v-for="status in workflow.statuses" :key="status.id" :value="status.status"  @click="changeEngagementKey(status.status)" :class="{ active: engagementFilterKey === status.status }">
      <span class="text-muted">{{ capitalize(status.status) }}</span>
   </li>
</ul>

这是正在呈现的参与活动的列表

<tbody>
  <tr v-for="engagement in filteredEngagements" :key="engagement.id" 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>

这是过滤的参与度的计算属性

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

要添加的另一件事是，如果刷新页面，警报将消失，并且我可以单击状态而没有任何问题。

这是我遇到问题的确切路线。与client是嵌套对象有关……

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

请寻求帮助！谢谢高级

Vue突变后属性未定义警报

0 个答案: