Vue.js Update Array not working using this.$set

Question

I do a request to a service and fill an object that have multiple arrays inside and it's an array itself. ex: this.Jprojs: [{name : 'test', ListItem1 : [], ListItem2 : [] }]

I put that object in a v-for:

<div id="app">
<table class="table table-striped">
  <tr>
    <th width="15%">Proj</th>
    <th>Detail</th>
  </tr>
  <tr v-for="proj in Jprojs" :key="proj.name">
    <td style="vertical-align:middle;"><strong>{{proj.name}}</strong><br/><a v-on:click="list(proj)"> <font-awesome-icon icon="tasks" /></a></td>
    <td>{{proj.ListItem1.length}}</td>
  </tr>
</table>

I have the method list:

list : function(proj){
    axios.get(url).then(
      response => {
        this.$set(proj.ListItem1,0,response.data.value);
        //Vue.set(proj.ListItem1,0,response.data.value);
        this.nextTick;
        console.log(proj)
      },
      error => {
      },
      err => { }
    );
}

The console shows the update but the html is not updated.

Erik Terwan · Accepted Answer · 2018-12-18 10:54:51Z

1

Make sure to update the Jprojs value, instead of proj. You coud pass an index instead of the proj object.

Get the index with v-for="(proj, index) in Jprojs" and pass it as list(index). Then just edit the Jprojs array with the given index; Jprojs[index].ListItem1 = ...

answered Dec 18, 2018 at 10:54

Erik Terwan

2,79020 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1839729 · Accepted Answer · 2018-12-19 17:56:48Z

0

I found the problem, Actually the property ListItem1 was not in the original Json so vue was not recognizing. what I did was use vue.$set correctly, was using Wrong

both work

this.$set(proj,"ListItem1",response.data.value);
Vue.set(proj,"ListItem1",response.data.value);

answered Dec 19, 2018 at 17:56

user1839729

315 bronze badges

Collectives™ on Stack Overflow

Vue.js Update Array not working using this.$set

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related