无法清空 Vue 计算数组 属性

Question

嗨！

我想在 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;
                }
            }
        }
    }
});

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