vue.js v-for list not not updating

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本身.

编辑1:名称中有什么:

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

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

EDIT2

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

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

Answer 1

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

一些想法探讨:

• 使用v-bind:key ="some_id"可以更好
• 使用push添加新元素
• 使用Vue.set(example1.items,indexOfItem,newValue)(Artokun也提到)

Answer 2

如果它是作为对象从服务器传递过来的，则在与data（）反应性绑定时，请确保使用Vue.set（obj，key，value）。

http://vuejs.org/api/#Vue-set