[Vuejs]-Watching dynamic nested data in Vue.JS?

by

2👍

✅

Fixed by adding the following to Filters.vue’s tags:

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

I then changed the Checkbox.vue slightly by replacing:

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

to:

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

and added:

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

Which the mounted lifecycle can catch on the Filters.vue file to fire the method.

Works great!

👤Derek

Leave a comment