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从商店中检索数据。

下面是它的屏幕截图

屏幕截图显示了ID为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))

我想提到的一件事是，当我使用Vue.set时，如果有人可以解释，那截图中将显示[object Object],[object Object]

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'],}},

视图：

<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（object，key，value）的args不匹配

Vue.set反应性不适用于第二级子对象

2 个答案: