在Vue.JS中观察动态嵌套数据？

Question

我在Vue.js组件中设置了一系列复选框，这些组件将数据发送到我的父元素。我想观察这些数据的变化，并将对象中的数据附加到API调用，以便过滤数据。

这是我检查某些项目时父元素上的数据是什么样的（如果没有选中，则它只是一个空对象）：

我希望能够将这些数据插入到API调用中，当数据发生变化时（通常）会看起来像这样：

this.axios.get('http://localhost:8000/api/v1/schools' + 
    for (feature in selectedFeatures) {
        '?features[]=' + feature
    }
).then((response) => {
    this.$root.$emit('searchQuery', response.data);
});

通常使用Vue的Watch功能非常容易，但由于我的数据嵌套在未命名的数组中并动态生成，我不知道该怎么做。

Answer 1

通过将以下内容添加到Filters.vue的标记来修复：

methods: {
    addFeatures() {
        var featureNames = '';
        // Loop through selectedFeatures and return a string of all features
        for (var key in this.selectedFeatures) {
           var obj = this.selectedFeatures[key];
           for (var prop in obj) {
               // Remove spaces and add + sign
               featureNames += '&features[]=' + obj[prop].split(' ').join('+');
           }
        };
        return 'http://localhost:8000/api/v1/schools?' + this.selectedGrade + '=1' + featureNames;
    }
},
mounted() {
    // When checkUpdated is emited, run new API call
    this.$root.$on('checkUpdated', function() {
        var gradeFeatures = this.addFeatures();
        // Dump string from addFeatures into end of API and send it to the root to filter out data
        this.axios.get( gradeFeatures ).then((response) => {
            this.$root.$emit('searchQuery', response.data);
        });
    }.bind(this));
}

然后我通过替换：

稍微更改了Checkbox.vue

<input type="checkbox" :disabled="disabled" :name="name" v-model="newValue" @change="$emit('change', newValue, $event)">

为：

<input type="checkbox" :disabled="disabled" :name="name" v-model="newValue" @change="valueChanged">

并补充说：

methods: {
    valueChanged() {
        this.$root.$emit('checkUpdated');
        this.$emit('change', this.newValue, this.$event);
    }
}

挂载的生命周期可以捕获Filters.vue文件以触发该方法。

效果很好！