Данные не обновляются при использовании в качестве объекта, но обычно изменяются, когда это переменная

Question

Я пишу функцию для обновления пользовательского флажка при нажатии (и я не хочу использовать собственный флажок по некоторым причинам).

Код для флажка

<div class="tick-box" :class="{ tick: isTicked }" @click="() => isTicked = !isTicked"></div>

, который работает, находят.

Однако флажков так много, что я использую объект для отслеживания каждого элемента.Выглядит это так

<!-- (inside v-for) -->
<div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" @click="() => {
  isTicked['lyr'+layer.lyr_id] = !isTicked['lyr'+layer.lyr_id]
}"></div>

Теперь ничего не происходит, вообще никаких ошибок.

Когда я хочу увидеть значение isTicked с {{ isTicked }}, оно просто показывает {}.

Это то, что я определяю в <script></script> части.

export default {
  data() {
    return {
      isTicked: {},
      ...
    };
  },
  ...
}

Не могли бы вы помочь мне, где я ошибаюсь?

Спасибо!

Редактировать:

Я знаю, что объявление isTicked: {}, первые несколько кликов ничего не сделают, потому что его свойство не определено.Однако, это должно быть определено первым / вторым щелчком, а не чем-то вроде этого.

Answer 1

VueJS просматривает данные по ссылке, поэтому для обновления объекта в состоянии вам нужно создать новый.

onChecked(lyr_id) {
    const key = 'lyr'+lyr_id;
    this.isTicked = {...this.isTicked, [key]: !this.isTicked[key]};
}

Answer 2

Объекты не отражают изменения при обновлении, как это.Вы должны использовать $ set для установки свойств объекта, чтобы сделать их реактивными.Попробуйте, как показано ниже

   <div class="tick-box" :class="{ tick: isTicked['lyr'+layer.lyr_id] }" @click="onChecked"></div>

Добавьте метод ниже:

onChecked() {
  this.$set(this.isTicked,'lyr'+this.layer.lyr_id, !this.isTicked['lyr'+this.layer.lyr_id])
}