Вложенный объект не определен после мутации в Vue - PullRequest
0 голосов
/ 02 ноября 2018

Итак, я перебираю список с помощью 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
   })
  },

Так что, как только список обновляется с помощью мутации, я не могу не фильтровать список по ключу, которым я обновил список, но если я обновлю страницу или просто нажму одну из других опций ключа, отфильтрованный список по-прежнему будет работать нормально.

Пожалуйста, посмотрите JS Fiddle , например. Обратите внимание, что jsfiddle настроен на мутирование только 1 объекта за раз , однако он повторяет сигнал тревоги, который я получаю при настройке. Опять же, проблема заключается в том, что после того, как я обновил состояние объекта, а затем попытался щелкнуть на статусе, объект которого был обновлен, я получу тревогу, говоря, что свойство вложенного объекта не определено ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...