Vue.js 2.5 列表渲染

Question

我在 JS/Vue 中有一个数组，我想在 <ul>/<li> 标签中显示它，并随着数组获得新元素而保持更新。

HTML：

<ul id="ulist">
    <li v-for="user in users">
        @{{ user }} <!-- "@" needed since this is in a laravel project with blade templates -->
    </li>
</ul>

JS：

<script>
  var socket = io('localhost:3000');

  new Vue({
     el: "#ulist",

     data: {
            users: []
           },

     mounted: function() {
        this.$nextTick(function() {
           socket.on('test-action', function(data) {
              this.users.push(data.username);
              console.log(data.username);
           }.bind(this));
        });
     }
  });
</script>

数组已正确填充（我可以通过 console.log 语句看到），但 <li v-for="user in users">... 部分似乎没有工作，因为没有创建任何 <li>...</li> 元素。我在这里做错了什么？

澄清一下：如果我将硬编码值添加到 users 数组，这些值会很好地显示在 <li> 元素中，但添加到数组中的其他值（在 mounted 函数中）不会显示在<li>...</li> 元素。

编辑：版本是 2.5.13，如果重要的话

Answer 1

你可以试试这个吗？

<script>
    var socket = io('localhost:3000');

    new Vue({
        el: "#ulist",

        data: {
            users: []
        },

        mounted: function() {
            var _self = this;
            this.$nextTick(function() {
                socket.on('test-action', function(data) {
                    self.users.push(data.username);
                    console.log(data.username);
                }.bind(this));
            });
        }
    });
 </script>

Answer 2

问题在于this 变量的范围。在您的代码中，这一行：

this.users.push(data.username); 

作用于 ajax 请求中的函数调用，如果您使用() =>，它将在您的方法中保持当前作用域的上下文。另外，在挂载的调用中你不应该需要nextTick，所以试试这个：

<script>
    var socket = io('localhost:3000');

    new Vue({
        el: "#ulist",

        data: {
            users: []
        },

        mounted: function() {
            socket.on('test-action', data => {
                this.users.push(data.username);
                console.log(data.username);
            });
        }
    });
 </script>

虽然您使用的是 bind(this)，但您在 nextTick 中使用了 this，这会导致范围问题。

还有一点值得注意，列表在 vue v 中需要 key?? （不记得是哪个了）所以使用v-for的时候最好加个key：

<ul id="ulist">
    <li v-for="(user, index) in users" :key="index">
        @{{ user }} <!-- "@" needed since this is in a laravel project with blade templates -->
    </li>
</ul>