2단계 하위 개체에 대해 Vue.set 반응성이 작동하지 않음

2단계 하위 개체에 대해 Vue.set 반응성이 작동하지 않음

나는 답을 가지고 있고 각각의 답변은 여러 개의 코멘트를 가지고 있고 각각의 코멘트는 또한 여러 개의 어린이 코멘트를 가지고 있다.

...mapState({
      comments: function (state) {
        if (this.answer_id) {
          let indexIs = state.mainAnswer.answers.findIndex(answer => {
            return answer.answer_id === this.answer_id
          })
          return state.mainAnswer.answers[indexIs].comments
        }
      }
    })

나는 매장에서 데이터를 검색하기 위해 mapState를 사용하고 있다.

여기 그것이 어떻게 보이는지 스크린샷이 있다.

스크린샷에는 112라는 아이디로 답글이 있고 4개의 댓글이 있고 4번째 댓글에는 아동 댓글이 달려있다.

내가 4번째 코멘트에 새로운 아동 코멘트를 추가하려고 할 때 부모 코멘트가 나타나는 것처럼 즉각적으로 나타나지 않는다.

나는 노력했지만 운이 없었다.

부에 없이세트

state.answers[indexIs].comments[commentIndexIs].child_comments.unshift(comment)

부모 의견에는 효과가 있었지만 자녀 의견에는 효과가 없었다.

부에와 함께.세트

Vue.set(state.answers[indexIs].comments[commentIndexIs], state.answers[indexIs].comments[commentIndexIs].child_comments, state.answers[indexIs].comments[commentIndexIs].child_comments.unshift(comment))

한 가지 말씀드리고 싶은 것은[object Object],[object Object]내가 Vue.set을 사용할때 스크린샷이 보여지고 있다. 만약 누군가 이것을 설명할 수 있다면 그것은 좋을 것이다.

Vue 자체는 비변형()에 반응한다.하지만 네 오브젝트 체인은 너무 길어서 일부는 반응하지 않을 수도 있어

이 데이터를 사용해 보십시오.

export default {
        data(){return{
            a:[],
            b:[],
            c:[],
            d:['apple','banana','car'],}},

보기:

<div v-for="bs in a.key">
    <div v-for="cs in bs">
        <div v-for="ds in cs">{{ds}}</div>    
    </div>        
</div>

이 방법은 반응성을 제공한다.

mounted(){
            Vue.set(this.a, "key", this.b);
            this.b.push(this.c);
            this.c.push(this.d);
            this.d.unshift('zoo');
}

그러나 이것은 반응성을 주지 않는다.

 mounted() {
            this.a.key = this.b;
            this.b[0] = this.c;
            this.c[0] = this.d;
            this.d.unshift('zoo');
}

코드에서 객체 체인의 어느 부분이 설정되었는지 확인하십시오.object.key = bla또는 다음에 의해 설정된 배열 요소array[key] = blabla왜냐하면 그러한 방법들은 반응적이지 않기 때문이다.

또한 새 요소 값 대신 unshift() 반환 길이. 따라서 사용량이 정의된 Vue.set(개체, 키, 값)의 arg와 일치하지 않음

먼저 다음 사항을 확인하십시오.child_comments항목을 추가하기 전에 배열이 있음:

if(!state.answers[indexIs].comments[commentIndexIs].child_comments)
  Vue.set(state.answers[indexIs].comments[commentIndexIs], 'child_comments', []);
state.answers[indexIs].comments[commentIndexIs].child_comments.unshift(comment);

참조URL: https://stackoverflow.com/questions/52610549/vue-set-reactivity-not-working-for-second-level-child-object