Получить окончательный / синхронизировать выбранный результат в флажок в vuejs

Question

предположим, у меня есть приложение todo.в другой таблице я сохраняю идентификатор пользователя и todoids, например:

user-----todo_ids
1-------------2,6,5,8
2------------6,8,5,9

, когда загружаю пользовательскую задачу, я проверял их на основе todo_ids.Проблема в том, что когда я удалил задачу, она не синхронизируется при обновлении пользователя!

https://jsfiddle.net/Fawel/1ej8tomn/

Там вы увидите, что в выбранном значении свойства есть: selected: [1, 2,8] Но в списке задач у меня нет никакого значения с идентификатором 8. Когда я сохраняю консоль, также печатаю со всеми отмеченными 8!И если я сохраню это, я буду сохранен с дополнительным идентификатором 8, который будет удален!Как я могу получить синхронизированные и окончательное значение, когда нажмите кнопку Сохранить.Что я хочу, так это то, что когда я нажимаю на кнопку saveorupdate, я должен получить список существующих идентификаторов.

Answer 1

Это должно вернуть, вы ждете

saveOrUpdate: function(){
      const vm = this
        console.log(
      this.todos.filter(
        (t)=>{return vm.selected.includes(t.id)}
      ).map((t)=>{return t.id})
      );
    }

Answer 2

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

...
computed: {
    todoIds: function() {
        return this.todos.map(function(item) {
            return item.id;
        })
    },
    filteredSelected() {
        return this.selected.filter(function(item) {
            return this.todoIds.includes(item);
        })
    }
},
method: {
    saveOrUpdate: function() {
        this.filteredSelected; // This is what you need
    }
}