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的值发生了变化，这证实了实际值已反映在组件中。但是，我看不到图标由于playControl的值的改变而改变。此外，如果刷新屏幕，一切都会按预期进行。

我的猜测是我正在弄乱某个地方的反应性。谢谢！

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
    }
}

Answer 2

我不知道“ playcontrol”的结构

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

我过去曾有过类似的事情，当您更新“ playControl”值时，您是否只是执行“ playControl = newValue”？如果这样做，可能会增加反应性，请尝试使用Vue $ set指令，例如：

Vue.set(this.playControl, <value>);

https://vuejs.org/v2/guide/migration.html#vm-set-changed

Answer 3

结果证明，我需要的是二传手和观察员的组合。我在组件级别使用了@ alx.lzt的设置器和监视程序，从而解决了所有问题

Answer 4

您可以使用多个属性进行反应性检查，$set可以更改对象中的属性，$nextTick可以分配值。

如果两者都不起作用，您可以尝试$forceUpdate()

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

4 个答案: