Add an array into an object using $set (properties remain unchanged)

Question

Add an array into an object using $set (properties remain unchanged)

I have an object with the following structure:

obj: {
  1: {
    'a': [ [] ],
    'b': [ [] ]
  }
}

Now, I am attempting to append 'c' => [ [] ] to this object in a watcher.

My first attempt was using this.obj[1]['c'] = [ [] ], however, it did not watch changes on the props of the child component when done this way. I suspect that I need to use $set.
Next, I tried
```
this.$set(this.obj, 1, { ['c']: [ [] ] })
```
- while this successfully watched the changes, it unfortunately removed the 'a' and 'b' properties entirely.
Lastly, I attempted
```
this.$set(this.obj[1], ['c'], [ [] ]);
```
- this appeared to change the object but still didn't trigger prop watches.

What is the correct way to use $set?

javascript arrays object vue.js vuejs2

Answer 1

Answer №1

As it has been pointed out in the remarks, you can simply utilize

this.$set(this.obj['1'], 'c', [[]])

By way of illustration...

new Vue({
  el: '#app',
  data: {
    obj: {
      1: {
        'a': [ [] ],
        'b': [ [] ]
      }
    }
  },
  methods: {
    addC: function() {
      this.$set(this.obj['1'], 'c', [[]])
    }
  }
})

<div id="app">
  <p><button @click="addC">Add "c" property</button>
    <ul>
      <li v-for="(prop, key) in obj">
        {{ key }}
        <ul>
          <li v-for="(arr, letter) in prop">
            {{ letter }} - size: {{ arr.length }}
            <ul>
              <li v-for="(sub, idx) in arr">
                Index {{ idx }} - size: {{ sub.length }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99efecfcd9abb7adb7ab">[email protected]</a>/dist/vue.min.js"></script>

Answer 2

As it has been pointed out in the remarks, you can simply utilize

this.$set(this.obj['1'], 'c', [[]])

By way of illustration...

new Vue({
  el: '#app',
  data: {
    obj: {
      1: {
        'a': [ [] ],
        'b': [ [] ]
      }
    }
  },
  methods: {
    addC: function() {
      this.$set(this.obj['1'], 'c', [[]])
    }
  }
})

<div id="app">
  <p><button @click="addC">Add "c" property</button>
    <ul>
      <li v-for="(prop, key) in obj">
        {{ key }}
        <ul>
          <li v-for="(arr, letter) in prop">
            {{ letter }} - size: {{ arr.length }}
            <ul>
              <li v-for="(sub, idx) in arr">
                Index {{ idx }} - size: {{ sub.length }}
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
</div>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99efecfcd9abb7adb7ab">[email protected]</a>/dist/vue.min.js"></script>

Add an array into an object using $set (properties remain unchanged)

Answer №1

Similar questions

Unable to establish successful Ajax connection with PHP function

Guide on using webpack to import jQuery

What is the best way to retrieve a specific item from an array of objects stored in JSON format using React?

What is the best way to determine the location of a specific line within a text file?

What could be causing the ajax request to not go through?

How can you locate the position of identified text on a webpage to accurately place the mouse cursor there?

I had hoped to remove just one item, but now the entire database is being erased

Navigating through hidden input fields in Angular by utilizing the tab key

The delay between initiating a Next JS route by clicking and the corresponding page actually loading

"Optimize Magellan Sidebar for Mobile Devices by Relocating it to the Bottom of the Page

Combining PageObjects with non-angular pages: is it possible?

Having trouble generating an HTML table from JSON data using JavaScript

Certain rows in the table should maintain a consistent width, while others are allowed to vary

Can anyone recommend a regular expression that would target values ranging from 0.5 to 24?

Unusual JavaScript Bug: Uncaught TypeError - Unable to access property 'url' of null

What is the code in CodeIgniter to retrieve the string 'Sugar & Jaggery, Salt' using <a>?

When modifying the state of an array within a component, certain values may be overwritten and lost in the process

What is the best way to combine elements from different arrays to create a comprehensive listing?

I am encountering an issue where the object I am sending with Next.js is appearing as undefined on the receiving page

Success is returned as AJAX error