Using Vue.js along with Vue.set() to update a Key/Value pair array

Question

Using Vue.js along with Vue.set() to update a Key/Value pair array

I am currently exploring the functionality of the

this.$set (also known as Vue.set)

method when updating a multidimensional array.

Take a look at this example:

new Vue({
  el: '#app',
  data: {
    rows:[{"id": "4", "edit": "true" }, { "id": "5", "edit": "false" }] 

  },
....

How can I utilize $this.set to achieve something like this:

this.rows[0].edit = false

I have tried this and it doesn't work:

this.$set(this.rows2, 0, false)

What is the correct approach to using $this.set for an array with key-value pairs?

javascript vue.js

Answer 1

Answer №1

Given that the properties for editing in your rows objects are already configured, there is no necessity to utilize Vue.set in this scenario. Just assign the property value and Vue will automatically detect the change:

this.rows[0].edit = false;

Below is a straightforward example:

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5", "edit": false }
      ],
    }
  },
  methods: {
    editNext() {
      let index = this.rows.findIndex(r => r.edit);
      
      this.rows[index].edit = false;

      let next = ++index % this.rows.length;
      this.rows[next].edit = true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="(row, i) in rows" v-if="rows[i].edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

However, if the initial state of the edit property in your row objects was not defined (or as a precautionary measure), then employing Vue.set becomes essential to introduce the property and enable reactivity:

this.$set(this.rows[0], 'edit', false);

Here's an illustration of such a situation:

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5" }
      ],
    }
  },
  methods: {
    editNext() {
      let i = this.rows.findIndex(r => r.edit);
      
      this.$set(this.rows[i], 'edit', false);
      
      let next = ++i % this.rows.length;
      this.$set(this.rows[next], 'edit', true);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="row in rows" v-if="row.edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

Refer to the documentation on Vue's Change Detection Caveats for more information.

Answer 2

Given that the properties for editing in your rows objects are already configured, there is no necessity to utilize Vue.set in this scenario. Just assign the property value and Vue will automatically detect the change:

this.rows[0].edit = false;

Below is a straightforward example:

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5", "edit": false }
      ],
    }
  },
  methods: {
    editNext() {
      let index = this.rows.findIndex(r => r.edit);
      
      this.rows[index].edit = false;

      let next = ++index % this.rows.length;
      this.rows[next].edit = true;
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="(row, i) in rows" v-if="rows[i].edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

However, if the initial state of the edit property in your row objects was not defined (or as a precautionary measure), then employing Vue.set becomes essential to introduce the property and enable reactivity:

this.$set(this.rows[0], 'edit', false);

Here's an illustration of such a situation:

new Vue({
  el: '#app',
  data() {
    return {
      rows:[
        { "id": "4", "edit": true }, 
        { "id": "5" }
      ],
    }
  },
  methods: {
    editNext() {
      let i = this.rows.findIndex(r => r.edit);
      
      this.$set(this.rows[i], 'edit', false);
      
      let next = ++i % this.rows.length;
      this.$set(this.rows[next], 'edit', true);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <div v-for="row in rows" v-if="row.edit">
    Editing Row ID {{ row.id }}
  </div>
  
  <button @click="editNext">Edit Next</button>
</div>

Refer to the documentation on Vue's Change Detection Caveats for more information.

Using Vue.js along with Vue.set() to update a Key/Value pair array

Answer №1

Similar questions

The Angular Material dialog fails to display content when triggered within an event listener in Google Maps

What is the best method to determine if an object includes a specific string?

Implementing react-table version 7 to display dynamic columns and rows fetched from a JSON dataset via an API

Prevent running function bodies simultaneously based on user events in JavaScript until a previously triggered execution is completed

Create a cookie on a subdomain that is accessible by all other subdomains

Is there a way to change ngx-timeago language when the button is pressed?

Warning in Vue 3: Production is being disrupted by "tags with side effects"

jQuery UI Accordion - Adjusting Panel Height to Content Size

What exactly does the Javascript object syntax signify? (specifically in a Vue script)

Notation for JavaScript UML component diagrams

The Challenge of Page Refresh in Express and Node.js

Can the execute_script function in Python Selenium wait for JavaScript content to fully load before proceeding?

I have developed a function that adds up price values, but for some reason it is always lagging one step behind

A collection of dropdown fields sharing identical names but containing distinct IDs

Looping infinitely through Navigation Guards beforeEach

Connecting JSON objects based on unique GUID values generated

Incorporating PHP variables within JavaScript

Detecting Changes in Angular Only Works Once when Dealing with File Input Fields

The data that was returned has the type of "Promise {<Fulfilled>: Array(1)}"

Unlocking the document instance in TypeScript: A comprehensive guide