Question

我正在通过API从axios获取数据，我设法通过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

DOM无法在Vuejs中呈现属性更改

1 个答案: