v-for 내부의 개체 어레이에 새 속성을 동적으로 추가하는 방법 - Vue.js

v-for 내부의 개체 어레이에 새 속성을 동적으로 추가하는 방법 - Vue.js

추가 속성을 추가합니다.showMore)는 v-for 내의 오브젝트 배열에 동적으로 대응합니다.내부에서도 실행할 수 있습니까?v-for예를 들어 다음과 같습니다.

this.students = [
{
 name: 'anonymous',
 class: 'Sixth',
 otherInfo: "..."
},
{
 name: 'anonymous2',
 class: 'Sixth',
 otherInfo: "..."
}
]
<div v-for="student in students">
  <div>{{student.name}}</div>
  <div>{{student.class}}</div>
  <div @click="student.showMore = true">Show more +</div> 
  <!-- it was possible in angularjs. is it possible in vuejs ?-->
</div>

여기서 한 가지 속성을 추가합니다.showMore)를 오브젝트 배열( )로 이동합니다.student를 클릭합니다.v-for 내부에서도 가능합니까? 그렇지 않다면 (베스트 프랙티스를 사용하여) 어떻게 이를 달성할 수 있습니까?

네, 하지만 반응하지는 않을 거예요.원하는 경우 다음을 사용해야 합니다.

vm.$set( target, key, value )

https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

사용하다Vue.set(obj, property, value);

자세한 예:

this.students = [
{
 name: 'anonymous',
 class: 'Sixth',
 otherInfo: "..."
},
{
 name: 'anonymous2',
 class: 'Sixth',
 otherInfo: "..."
}
]
<div v-for="student in students">
  <div>{{student.name}}</div>
  <div>{{student.class}}</div>
  <div @click="showMore(student)">Show more +</div> 
  <!-- it was possible in angularjs. is it possible in vuejs ?-->
</div>

showMore(student) {
  Vue.set(student, 'showMore', true);
}

주의: Import하는 것을 잊지 마십시오.Vue

최신 브라우저를 대상으로 하는 경우 항상 요약 태그를 사용할 수 있습니다.

<details>
  <summary>More Info</summary>
  <p>hello!</p>
</details>

언급URL : https://stackoverflow.com/questions/47052445/how-to-dynamically-add-a-new-property-to-array-of-object-inside-v-for-vue-js