DOM не может отобразить изменение свойства в Vuejs

Question

Я получаю данные с помощью axios из API, мне удается перебирать v-for через каждое свойство, и я хочу, чтобы @click показывал дочерние свойства ТОЛЬКО элемента CLICKED.

// API дает

  Subject_title: (...)
  showChildren: false <-- This is added during the call with forEach
  subject_id: (...)
  subjects: (...)

А остальное:

 const vm = new Vue({
     el: "#app",
     data() {
        return {
         results: [],
     }
},
     methods: {
        toggleChildren(i) {
        this.results[i].showChildren =!this.results[i].showChildren;
        }
      },

     mounted() {
      axios.get(url).then(response => {
       this.results = response.data.result;
       this.results.forEach(sub => {
           sub["showChildren"] = false
           });
      });
}
  });

HTML:

<div class="subjects-single" v-for="(result,i) in results" :key="i">

  <div  @click="toggleChildren(i)" class="subjects-title">

     <span class="accordion-title__text">

     {{ result.Subject_title }} {{i}}

    </span>

    <ul v-if="results[i].showChildren">

     <li v-for="subject in result.subjects">

       {{ subject.Subject_title }} </li>

    </ul>
 </div>

Answer 1

Данные не являются типичными, если вы напрямую изменяете элемент массива с помощью индекса, вы должны использовать Vue.set.

Vue.set(this.results, indexOfItem, newValue)

https://vuejs.org/v2/guide/list.html#Caveats