数组内对象的VueJS反应性问题

Question

我已经声明了我的数据对象，queuedItemList: []它应该包含由后台服务提供的一组项目。在 HTTP 请求之后，我使用类似的 for 循环填充列表

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.queuedItemList.splice(i, 1, newObject);
}

用于填充以下模板

<Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem">
</Item>

I am supposed to do a periodic HTTP GET to get the new list of items, which may also contain current items with maybe different state. Inside the component, I am using a v-if to select between two different icons.

<v-icon name="play" class="controlIcons" v-if ="playControl" />
<v-icon name="pause" class="controlIcons" v-if ="!playControl" />

Now, after some HTTP requests, I see the value of playControl change in Vue Devtools which confirms that the actual value is reflected in the component. However, I can't see the icons change due to the change in the value of playControl. Furthermore, everything works as expected if I refresh the screen.

My guess is that I'm messing up the reactivity somewhere. Thanks!

Answer 1

您正在寻找https://vuejs.org/v2/guide/reactivity.html

for(var i = 0; i < getList.length; i++) {
    var newObject = Object.assign({}, getList[i]);
    this.$set(this.queuedItemList, i, newObject);
}

另一种方法可能是更新父项列表 :key - 因此，重新渲染它 - 每次添加项目时：

</div :key="computedKey">    
    <Item v-for="(item, index) in queuedItemList" :key="index" :componentData="item" :index="index" @remove="removeItem"></Item>
</div>

和

computed: {
    computedKey () {
        return this.queuedItemList.length
    }
}