Реактивность Vue.set не работает для дочернего объекта второго уровня

Question

У меня есть ответы, и у каждого отдельного ответа есть несколько комментариев, и у каждого комментария также есть несколько дочерних комментариев

...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-й комментарий, он не появляется мгновенно, как родительский комментарий.

Я пытался как, но не повезло

безVue.set

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

Работает для родительских комментариев, но не для дочерних комментариев

С Vue.set

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, если кто-нибудь может объяснить это, было бы здорово

Answer 1

Прежде чем добавлять элемент, вы должны убедиться, что массив 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);

Answer 2

Vue сама реагирует на unshift ().Но ваша цепочка объектов очень длинная, часть из них может быть неактивной.

Я пробовал эти данные:

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

view:

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

thisметод дает реактивность:

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 (объект, ключ, значение)