Итак, я перебираю список с помощью 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 объекта за раз , однако он повторяет сигнал тревоги, который я получаю при настройке. Опять же, проблема заключается в том, что после того, как я обновил состояние объекта, а затем попытался щелкнуть на статусе, объект которого был обновлен, я получу тревогу, говоря, что свойство вложенного объекта не определено ...