无法清空 Vue 计算数组属性答案

【问题标题】：Cannot empty Vue computed array property无法清空 Vue 计算数组属性
【发布时间】：2018-06-05 14:50:10
【问题描述】：

喂！

我想在 watch 中更改一个 Vue 计算数组，但它并没有清空它。数组推送是有效的，但在此之前，截断无效。

有什么问题？有什么想法吗？

谢谢！

var vm = new Vue({
    el: '#form',
    data: {
        form: {
            strFirstName: null,
            strLastName: null,
            strPhone: null,
            numStartTime: 11,
            numEndTime: 18
        }
    },
    computed: {
        rowEndTime: function() {
            var rowTime = [];
            for (var i = 11; i < 19; i++) {
                rowTime.push(i);
            }
            return rowTime;
        }
    },
    watch: {
        'form.numStartTime': function(numNewStartTime) {
            this.rowEndTime = [];

            for (var i = numNewStartTime; i < 19; i++) {
                this.rowEndTime.push(i);
                if (this.form.numEndTime <= numNewStartTime) {
                    this.form.numEndTime = numNewStartTime;
                }
            }
        }
    }
});

【问题讨论】：

您应该从 data 属性推送/截断，而不是计算属性。

标签： arrays vue.js watch

【解决方案1】：

这就是计算属性的用途 - https://vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property

你可以在计算属性的函数中观察一些值。

在你的情况下：

computed: {
    rowEndTime: function() {
        var rowTime = [];
        for (var i = this.form.numStartTime; i < 19; i++) {
            rowTime.push(i);
        }
        return rowTime;
    }
}

【讨论】：