Observing nested data changes in Vue.JS?

Question

Observing nested data changes in Vue.JS?

In my Vue.js components, I have a group of checkboxes that are sending data to the parent element. My goal is to monitor this data for changes and use it to filter information in an API call.

When certain checkboxes are selected, the data stored on the parent element looks like this:

https://i.sstatic.net/aCz9T.png

I aim to incorporate this data into an API request that would follow this format when the data changes:

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

Typically, using Vue's Watch functionality makes this task simple. However, due to the nested structure of my dynamic arrays, I am unsure how to achieve this.

javascript vue.js vuejs2

Answer 1

Answer №1

To resolve the issue, I made a modification to the code in Filters.vue as follows:

methods: {
    addFeatures() {
        var featureNames = '';
        // Iterate through selectedFeatures and create 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() {
    // Trigger new API call when checkUpdated is emitted
    this.$root.$on('checkUpdated', function() {
        var gradeFeatures = this.addFeatures();
        // Append result from addFeatures method to end of API URL and send it to root to filter data
        this.axios.get( gradeFeatures ).then((response) => {
            this.$root.$emit('searchQuery', response.data);
        });
    }.bind(this));
}

In addition, I made a slight change to Checkbox.vue by updating:

<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">

I also added:

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

The mounted lifecycle in Filters.vue can then detect these changes and trigger the method accordingly.

This solution works effectively!

Answer 2

To resolve the issue, I made a modification to the code in Filters.vue as follows:

methods: {
    addFeatures() {
        var featureNames = '';
        // Iterate through selectedFeatures and create 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() {
    // Trigger new API call when checkUpdated is emitted
    this.$root.$on('checkUpdated', function() {
        var gradeFeatures = this.addFeatures();
        // Append result from addFeatures method to end of API URL and send it to root to filter data
        this.axios.get( gradeFeatures ).then((response) => {
            this.$root.$emit('searchQuery', response.data);
        });
    }.bind(this));
}

In addition, I made a slight change to Checkbox.vue by updating:

<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">

I also added:

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

The mounted lifecycle in Filters.vue can then detect these changes and trigger the method accordingly.

This solution works effectively!

Observing nested data changes in Vue.JS?

Answer №1

Similar questions

Is there a way to fully break out of a .forEach loop that's nested within a function?

Ways to extract information from a dynamically loaded webpage

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

When the add button is clicked, I would like to implement a feature where a checkbox is added

I'm feeling a bit lost on where to go next with this JavaScript

Aligning the second heading alongside pictures and a lightbox

javascript - determine whether a hyperlink has been accessed

invisible recaptcha with synchronous ajax

Bizarre Angular directive nesting issue discovered after upgrading from version 1.4.9 to 1.5.0

The OnChange event seems to be malfunctioning as it is not being triggered despite other parts of the code functioning properly

Is it worth diving into Vue.js, Angular, or React while utilizing Laravel currently?

What is the best method for transforming a nested object into an array of objects?

The rendering of graphs in FusionCharts is experiencing delays particularly in Internet Explorer, with Chrome performing more efficiently in comparison

Entering a string into Angular

Tips for uploading files in filepicker with protractor

Is there a way to dynamically update the text in an HTML element with a randomly generated value using JavaScript?

Error encountered while trying to retrieve Instagram JSON data via request due to an abrupt end of input

Attempting to retrieve information from my MongoDB database and populate it into a <table> structure on a web page

Transferring data from local storage to a PHP server using AJAX

AngularJS: How can components effectively communicate with each other using best practices?