Managing modifications within an array of objects proves to be a challenge when utilizing Vue.$set

Question

Managing modifications within an array of objects proves to be a challenge when utilizing Vue.$set

I'm facing an issue with my computed attribute 'alphabet', which contains a list of objects, each with attributes letter (a string) and guessed (a boolean). I've been attempting to bind the guessed attribute to a class using Vue.$set instead of an equality operator, as per the documentation's suggestion. However, even after trying this, I can't seem to make it work.

Setting the guessed attribute to true by default did work, indicating that the problem doesn't lie in my CSS configuration.

To confirm that the value of the guessed attribute is changing, I printed out the alphabet object in the console (and it did change). The issue seems to be that, for some reason, the value isn't being updated reactively in the HTML.

Here is how I've configured the list:

<ul>
    <li v-for="(letter, index) in alphabet"
        v-bind:key="letter.id"
        @click="makeGuess(index)"
        v-bind:class="{guessed: letter.guessed}">{{letter.letter}}
    </li>
</ul>

On the last line, I'm attempting to connect the guessed attribute with the class.

This is my alphabet attribute:

computed: {
    alphabet: function () {
        var objects = [];
        var letters = "abcdefghijklmnopqrstuvwxyz".split("");
        letters.forEach(function (element) {
            objects.push({
                letter: element,
                guessed: false
            })
        });
        return objects;
    }
}

And here is my makeGuess function:

methods: {
    makeGuess: function (index) {
        if (this.word.includes(this.alphabet[index].letter)) {
            this.$set(this.alphabet, index, {
                letter: this.alphabet[index].letter,
                guessed: true
            })
            console.log(this.alphabet)
        }
    }
}

The expected outcome is for the guessed class to be added reactively when letter.guessed is true, but it's not happening. What am I missing?

javascript vue.js

Answer 1

Answer №1

To make changes to the output of a computed property, you must adjust the inputs for that property so it can be recalculated with all the necessary information.

Vue does not automatically track changes in objects or arrays returned by computed properties under the assumption that these values remain immutable. This means only the initial data needs to be observed.

An easy fix is to move the alphabet array into the data section instead of using a computed property:

data: function () {
    var letters = "abcdefghijklmnopqrstuvwxyz".split("");

    var alphabet = letters.map(function (element) {
        return {
            letter: element,
            guessed: false
        }
    });

    return {
        alphabet: alphabet
    };
}

By doing this, all changes will trigger reactivity without the need for a computed property or $set.

If moving it to a computed property is not an option, such as when the letters come from a prop, then a more complex solution is required. In that case, you'll need a data structure to store guesses, like this:

data: function () {
    return {
        guessed: {}
    };
}

The computed property would then look like this:

computed: {
    alphabet: function () {
        var letters = "abcdefghijklmnopqrstuvwxyz".split("");
        var guessed = this.guessed;

        return letters.map(function (element) {
            return {
                letter: element,
                guessed: guessed[element]
            };
        });
    }
}

Lastly, you would use the makeGuess method like this:

methods: {
    makeGuess: function (index) {
        var letter = this.alphabet[index].letter;

        if (this.word.includes(letter)) {
            this.$set(this.guessed, letter, true);
        }
    }
}

Answer 2

To make changes to the output of a computed property, you must adjust the inputs for that property so it can be recalculated with all the necessary information.

Vue does not automatically track changes in objects or arrays returned by computed properties under the assumption that these values remain immutable. This means only the initial data needs to be observed.

An easy fix is to move the alphabet array into the data section instead of using a computed property:

data: function () {
    var letters = "abcdefghijklmnopqrstuvwxyz".split("");

    var alphabet = letters.map(function (element) {
        return {
            letter: element,
            guessed: false
        }
    });

    return {
        alphabet: alphabet
    };
}

By doing this, all changes will trigger reactivity without the need for a computed property or $set.

If moving it to a computed property is not an option, such as when the letters come from a prop, then a more complex solution is required. In that case, you'll need a data structure to store guesses, like this:

data: function () {
    return {
        guessed: {}
    };
}

The computed property would then look like this:

computed: {
    alphabet: function () {
        var letters = "abcdefghijklmnopqrstuvwxyz".split("");
        var guessed = this.guessed;

        return letters.map(function (element) {
            return {
                letter: element,
                guessed: guessed[element]
            };
        });
    }
}

Lastly, you would use the makeGuess method like this:

methods: {
    makeGuess: function (index) {
        var letter = this.alphabet[index].letter;

        if (this.word.includes(letter)) {
            this.$set(this.guessed, letter, true);
        }
    }
}

Managing modifications within an array of objects proves to be a challenge when utilizing Vue.$set

Answer №1

Similar questions

Show a variety of months using a datepicker arranged neatly in rows and columns

Angular 5 requires the Google Map API call to be made before initiating the http get request

Accessing a hyperlink in an alternative browser

Is there a way to retrieve a list of functions using ScriptEngine in Java?

I am looking for ways to identify the specific code responsible for causing a JavaScript heap out of memory issue

What steps can I take to ensure that my bot disregards any actions taken by other bots?

What role does the cleanData function play in jQuery?

Having trouble with React list.map not functioning properly while deleting items from local storage?

Exploring the power of hierarchical organization in node.js modules

Struggling to create a line break within an SVG using the <tspan> element?

Begin the Desktop PWA in immersive full-screen or kiosk mode

Is the "connectToStores" method becoming obsolete in React/Flux applications?

Reverting to the original order in jQuery DataTables after dropping a row

When using Sequelize.or, only the first result is returned instead of returning all results

JavaScript code to automatically pause/play HTML5 videos when scrolling

The functionality of Events javascript seizes to work once new content is loaded into a div through Ajax

I'm looking to publish my Vue project on GitHub Pages, what steps do I need to

Is requesting transclusion in an Angular directive necessary?

Guide on properly documenting custom function types in JSDoc or TypeScript to ensure accurate referencing for VSCode IntelliSense functionality

Integrating Facebook login with Cordova using the cordovaOauth plugin