Ensure that any nested object has a value of true, and then change it to false when clicked in a Vue application

Question

Ensure that any nested object has a value of true, and then change it to false when clicked in a Vue application

I have a button on my template that, when clicked, should check all isActive values.

If any value is found to be true, it should be changed to false.

This is how my Vue script is structured:

data: function() {
  return {
    rates: {
       a: {
           x: [40, 60],
           isActive: false
       },
       b: {
           x: [66, 76],
           isActive: false
       },
       c: {
           x: [76, 108],
           isActive: false
       }
    }
  }
},
methods: {
  changeToFalse() {
     // This method will handle the changes
  }
}

And this is what my template code looks like:

<template>
  <div>
    <button @onclick="changeToFalse()"> Click Me </button>
  </div>
</template>

Note: All functionality, including the looping through and changing of values, should be contained within the changeToFalse() method. Thank you! :)

javascript vue.js

Answer 1

Answer №1

If you want to deactivate all active rates in your code, simply include the following code snippet within your method():

deactivateAllRates() {
     // This method deactivates all active rates
       for(let rate in this.prices) {
          if(this.prices[rate].isActive == true) {
                this.prices[rate].isActive = false;
             }
         console.log(this.prices[rate].isActive);
     }
  }

Answer 2

If you want to deactivate all active rates in your code, simply include the following code snippet within your method():

deactivateAllRates() {
     // This method deactivates all active rates
       for(let rate in this.prices) {
          if(this.prices[rate].isActive == true) {
                this.prices[rate].isActive = false;
             }
         console.log(this.prices[rate].isActive);
     }
  }

Ensure that any nested object has a value of true, and then change it to false when clicked in a Vue application

Answer №1

Similar questions

How can I prevent buttons from being created using ngFor in Angular?

Show the tooltip above the cursor if there is enough space in the viewport; otherwise, position it

suggestions for organizing data in an AJAX/jQuery page

Locating the Smallest Value in an Array of Objects

Removing unwanted users in a React application

Using JSON to populate an Interface Array

Change ES6 JavaScript to ES5 standard

Selector that targets an attribute in the beginning of its value [name^=value]

Challenges with Javascript arrays

What causes parent class to clear input?

Is it possible to integrate the DataTable plugin into a Laravel Vue.js project effectively?

Initiating the onclick event for Input/Form

Counting the number of PHP inputs in a field

"Organize JavaScript array elements into groups based on their content

Choose to selectively turn off designated referenced JavaScript files on Firefox

Simulate a new Date object in Deno for testing purposes

Recurring occurrences of Ajax ViewComponent being triggered

Verifying form input with jQuery's range validation

Creating a dynamic NxNxN matrix from a basic array in Vue.js

Determine the distance needed to cover the full field of view (