模板中的Vue.js动态数组不起作用

Question

我刚刚开始摆弄VueJs，并尝试了一个简单的示例，其中数组具有值并在模板中使用它，效果很好

<body>
    <div id="app">
        {{operations.join(', ')}}
    </div>
</body>
<a href=""></a>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Understanding Hooks',
            operations: ['One', 'Two'],
        }
    })
</script>

但是，当我尝试动态填充操作（数组）时，页面/浏览器变得无响应（以下是代码）。 任何输入都会有所帮助。

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Undstanding Hooks',
            operations: ['One', 'Two'],
        },
        created: function() {
            console.log('=> ', this.operations)
            this.operations.push('CREATED : ');
        },
        mounted: function() {
            this.operations.push('MOUNTED : ');
        },
        updated: function() {
            this.operations.push('UPDATED : ');
        },
        destroyed: function() {
            this.operations.push('DESTROYED : ');
        },
    })
</script>

Answer 1

更新

this.operations.push('UPDATED : '); 将使组件updated钩子无限运行。 请尝试将其删除。

有关于不变和反应性的最佳实践。 此操作的引用this.operations 。

你应该用

this.operations = [...this.operations, 'CREATED : ']

代替

this.operations.push('CREATED : ');

要么

this.operations = this.operations.concat(['CREATED :'])

模板中的Vue.js动态数组不起作用

问题描述

1 个解决方案

解决方案1
0 2018-05-30 07:29:15

模板中的Vue.js动态数组不起作用

问题描述

1 个解决方案

解决方案1 0 2018-05-30 07:29:15

解决方案1
0 2018-05-30 07:29:15