vue.js v-for list not not updating [英] vue.js v-for list not updating

问题描述

我有这个清单：

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

然后我有这个vue对象：

And then I have this vue object:

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

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

So the 'names' data is updated and given information from the server. However, when the names are updated/change, it is not reflected on the client side list. The items that appear in the list only reflect the items that were there when the page initially loaded.

在Google Chrome中的vue.js开发人员工具中，我总能看到更新的名称数据，但它不反映在DOM本身。

In the vue.js developer tools in Google Chrome, I can always see the updated 'names' data, but it just doesn't reflect on the DOM itself.

EDIT1 ：
什么在'name's：

EDIT1: What's in the 'name's:

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

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

EDIT2

所以我正在使用node.js和转移数据通过socket.io从节点传递到客户端，如下所示：

So I'm using node.js, and transferring the data live from node to the client via socket.io like this:

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

推荐答案

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

Array change detection is a bit tricky in Vue. Most of the in place array methods are working as expected (i.e. doing a splice in your $data.names array would work), but assigining values directly (i.e. $data.names[0] = 'Joe') would not update the reactively rendered components. Depending on how you process the server side results you might need to think about these options described in the in vue documentation: Array Change Detection.

要探索的一些想法：

• 使用v-bind：key =some_id更好地


• 使用推送添加新元素


• 使用Vue.set（example1.items，indexOfItem，newValue）（也被Artokun提及）

这篇关于vue.js v-for list not not updating的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！