Vue - Обработчик щелчка в повторном div не будет принудительно обновлять сам по себе, нужно сделать это вручную

#vue.js

Вопрос:

Когда у меня есть обработчик щелчка в div , который повторяется v-for , кажется, что изменения, внесенные в этот обработчик щелчка, не будут обновлены в DOM.

Почему?

https://jsfiddle.net/AndersBillLinden/109uzsx7/27/

HTML:

 <div id="vue">
  <input type="checkbox" v-model="force_update"/> force update
  <div v-for="e in arr">
    {{e.id}} = {{e.text}}
    <a href="#" @click="on_link_clicked(e)">click</a>
    <span v-show="e.clicked"> clicked</span>
  </div>
</div>

JS:

 new window.Vue(
{
  el: '#vue',
  data:
  {
    arr: [{id:1,text:"one"}, {id:2, text:"two"}, {id:3, text:"three"}],
    force_update: true
  },
  methods:
  {
    on_link_clicked(e)
    {
      e.clicked = true;
      
      if (this.force_update)
        this.$forceUpdate();
    }
  }
});

переход по ссылке 1

снятие флажка принудительное обновление

перейдя по 2-й ссылке

(ничего не происходит)

проверка «принудительное обновление»

Теперь отображаются изменения, внесенные на предыдущем шаге.

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

1.в оригинальной модели нет щелчка, поэтому она не будет реактивной, используйте this.$set(e, 'clicked', true) jsfiddle.net/g4fq3e76

2. Таким образом, он не может обнаружить, что тогда происходит переход от неопределенного к истинному?

3. нет, если это не определено сначала в arr элементах

4. Мне нравится свобода делать это, потому что я привык к этому с angularjs.

5. спасибо за согласие, также обратите внимание, что данные должны возвращать функцию, которая возвращает объект data: () => ({}) и т. Д., А не data: {}

Ответ №1:

Измените e.clicked = true; значение на this.$set(e, 'clicked', true) так, чтобы оно добавляло реактивность свойству, которого еще нет в модели.