vue.js v-for 列表未更新

Question

我有这个清单：

 <ul id="tab">
    <li v-for="list in names">
        {{ list.personName }}
    </li>
</ul>

然后我有这个 vue 对象：

 var vm = new Vue ({
    el: '#tab',
        data: {
            names: //an object array coming from the server
        }
    });

因此，“名称”数据被更新并从服务器提供信息。但是，当名称更新/更改时，它不会反映在客户端列表中。列表中显示的项目仅反映页面最初加载时存在的项目。

在谷歌浏览器的 vue.js 开发者工具中，我总是可以看到更新的“名称”数据，但它并没有反映在 DOM 本身上。

EDIT1 ：“名称”中有什么：

 names: Array[2]
    0: Object
    _id: "580aeafd017fbfb81a3a794d"
    personName: "hi"

    1: Object
   _id: "580c4455ccc9e39c21f02434"
   personName: "test"

编辑2

所以我正在使用node.js，并通过socket.io将数据从节点实时传输到客户端，如下所示：

 socket.on('userDocument', function(userDocument) {
    var vm= new Vue ({
        el: '#tab',
        data: {
            names: //an object array coming from the server
        }
    });
});

原文由 MonkeyOnARock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 中的数组变化检测有点棘手。大多数就地数组方法都按预期工作（即在您的 \(data.names 数组中进行拼接会起作用），但直接分配值（即 \)data.names[0] = ‘Joe’）不会响应式更新渲染的组件。根据您处理服务器端结果的方式，您可能需要考虑在 vue 文档中描述的这些选项： 数组更改检测。

一些需要探索的想法：

• 使用 v-bind:key=“some_id” 有更好的
• 使用 push 添加新元素
• 使用 Vue.set(example1.items, indexOfItem, newValue) （Artokun 也提到过）

原文由 vizmi 发布，翻译遵循 CC BY-SA 4.0 许可协议