在对象上使用push()时,使用$ set的Vue2不会修复更改检测警告

时间:2017-11-08 21:43:59

标签: vue.js vuejs2 vue-component

继续此问题:Strange issue with Vue2 child component object v-for list render

我有一个循环遍历数组products的函数,它接受某些值并将它们添加到名为attributes的对象中。我需要使用this.$set来更新我的attributes对象,以确保Vue可以检测到更新。

我的功能如下:

//// checks if the value exists in the object to avoid adding duplicates

        doesItExist: function(key, value) {
            for (let i = 0; i < this.attributes[key].length; i++) {
                if (this.attributes[key][i] == value) return true;
            }
            return false;
        },


//// if the value does not exist, then add it to the object

        pushIfNotExists: function(key, value) {
            if (!this.doesItExist(key, value)) {   // returns true/false
                this.$set(this.attributes[key], key, this.attributes[key].push(value));
            }
        },


//// main function looping through the original products array to extract attributes

        createAttributes: function() {
            for (let i = 0; i < this.products.length; i++) {
                for (let j = 0; j < this.products[i]['attributes_list'].length; j++) {
                    let attributeName = this.products[i]['attributes_list'][j]['attribute_name'];
                    if (!this.attributes[attributeName]) {
                        this.attributes[attributeName] = new Array();
                    };
                    this.pushIfNotExists(attributeName, this.products[i]['attributes_list'][j]['value']);
                }
            }
            console.log(this.attributes);  // outputs expected object
        },

我遇到的问题是,在我的子组件中,属性数据仍未呈现,这意味着它必须无法正常工作(即使我的控制台日志显示数据存在)。

有什么想法吗?

由于

0 个答案:

没有答案