vue.js - 数组内对象的 VueJS react 性问题

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>

我应该定期执行 HTTP GET 以获取新的项目列表，其中可能还包含状态可能不同的当前项目。在组件内部，我使用 v-if 在两个不同的图标之间进行选择。

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

现在，在一些 HTTP 请求之后，我在 Vue Devtools 中看到 playControl 的值发生了变化，这证实了组件中反射(reflect)了实际值。但是，由于 playControl 值的变化，我看不到图标发生变化。此外，如果我刷新屏幕，一切都会按预期进行。

我的猜测是我弄乱了某处的 react 性。谢谢!

Answer 1

您正在寻找 https://v2.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
    }
}