vue $set 无法触发视图更新

Question

写了一个sku的切换，在页面中可以使用，但是当提取出来后发现在修改数组的值后无法触发watch
代码是

var skus = {
    props: {
        is_attr: {type: Number, require: true},
        attr: {type: Array, require: true},
        sku_list: {type: Array, require: true},
        init_sku: {type: String, require: true}
    },
    template: "<div class=\"goods_attr\" v-if=\"is_attr\">\n" +
    "                <template v-for=\"(skus,index) in attr\">\n" +
    "                    <h2 class=\"attr-name\" v-text=\"skus.attr_name\"></h2>\n" +
    "                    <ul>\n" +
    "                        <li class=\"goods_sku\"\n" +
    "                            v-for=\"(sku,ind) in skus.attr_list\"\n" +
    "                            v-text=\"sku\"\n" +
    "                            @click=\"setSku(index,sku)\"\n" +
    "                            :class=\"[csku_name[index]===sku?'active':'',arrIn(sku)?'':'disable']\">\n" +
    "                        </li>\n" +
    "                    </ul>\n" +
    "                </template>\n" +
    "            </div>",

    watch: {
        csku_name: function (cur, old) {
            console.log(cur);
            var _this = this;
            var allSkus = [];
            cur.forEach(function (val, ind) {
                _this.sku_list.forEach(function (value, index) {
                    if (value.sku_key.indexOf(val) > -1) {
                        var skus = value.sku_key.split(';');
                        skus.forEach(function (sku, i) {
                            if (sku !== val) {
                                allSkus.push(sku);
                            }
                        })
                    }
                })
            });
            _this.cskus = unique(allSkus);
        }
    },
    computed: {
        csku_name: function () {
            return this.init_sku.split(',')
        },
        cskus: function () {
            var skus = [];
            this.attr.forEach(function (value, index) {
                var sku = [];
                if (typeof (value.attr_list) === "object") {
                    for (var i in value.attr_list) {
                        sku.push(value.attr_list[i]);
                    }
                } else {
                    sku = value.attr_list;
                }
                skus = skus.concat(sku);
            });
            return skus;
        }
    },
    methods: {
        setSku: function (index, sku) {
            var _this=this;
            this.$set(_this.csku_name, index, sku);
        },
        arrIn: function (str) {
            var index = this.cskus.indexOf(str);
            if (index > -1) {
                return true;
            } else {
                return false;
            }
        },
        unique: function (array) {
            var r = [];
            for (var i = 0, l = array.length; i < l; i++) {
                for (var j = i + 1; j < l; j++)
                    if (array[i] === array[j]) j = ++i;
                r.push(array[i]);
            }
            return r;
        },
    }

运行结果是

在点击后无法触发watch
数据赋值正常，但是不能实时修改

Answer 1

是因为你修改计算属性造成的。。用data代替它