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

请确保更新Jprojs值，而不是proj。您可以通过索引而不是proj对象。

使用v-for="(proj, index) in Jprojs"获取索引，并将其作为list(index)传递。然后，使用给定的索引编辑Jprojs数组； Jprojs[index].ListItem1 = ...

Answer 2

我发现了问题，实际上属性ListItem1不在原始Json中，因此vue无法识别。我所做的是正确使用vue。$ set，使用了错误

两个工作

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

Vue.js更新数组无法使用this。$ set

2 个答案: