• {{ list.personN...">
  • {{ list.personN..."/>
  • {{ list.personN...">
  • {{ list.personN...">

    vue.js v-for列表未更新

    JavaScript

    GreenGil

    2020-03-13

    我有这个清单:

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

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

    在Google Chrome浏览器的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
            }
        });
    });
    

    第1468篇《vue.js v-for列表未更新》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

    1个回答
    泡芙神无伽罗 2020.03.13

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

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

    问题类别

    JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android