Vue.js Update Array не работает с этим. $ Set

Question

Я делаю запрос к службе и заполняю объект, который имеет несколько массивов внутри, и это сам массив.Например: this.Jprojs: [{name : 'test', ListItem1 : [], ListItem2 : [] }]

Я поместил этот объект в 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>

У меня есть список методов:

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 => { }
    );
}

Консоль показывает обновление, но HTML не обновляется.

Answer 1

Я обнаружил проблему, на самом деле свойство ListItem1 не было в исходном Json, поэтому vue не распознал.я использовал vue. $ set, правильно использовал Wrong

, оба работают

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

Answer 2

Обязательно обновите значение Jprojs вместо proj.Вы можете передать индекс вместо объекта proj.

Получите индекс с помощью v-for="(proj, index) in Jprojs" и передайте его как list(index).Затем просто отредактируйте массив Jprojs с указанным индексом;Jprojs[index].ListItem1 = ...