我想使用我创建的函数将一个数字添加到这个列表中，但是，数据不更新。 for循环将数据添加到列表中，但上面的代码没有使用它。
null
<script>
export default {
data: () => ({
row: [],
column: [],
}),
methods: {
async initGraph() {
for(let x = 0; x < 25; x++)
{
this.row[x] = x;
}
for(let y = 0; y < 25; y++){
this.column[y] = y;
}
console.log(this.row);
console.log(this.column);
}
},
mounted(){
this.initGraph();
}
}
</script><template>
<v-app>
<tbody>
<tr v-for="r in row" v-bind:key="r" :id="r">
<td v-for="c in column" v-bind:key="c" :id="c" class="unvisited">
</td>
</tr>
</tbody>
<h1>{{row}}</h1>
</v-app>
</template>null
如果您直接修改数组，Vue无法检测到对数组的更改。 请参阅https://vuejs.org/v2/guide/list.html#mutation-methods一个可能的解决方案是使用方法进行数组操作。 以下应能起作用:
null
<script>
export default {
data: () => ({
row: [],
column: [],
}),
methods: {
initGraph() {
for(let x = 0; x < 25; x++)
{
this.row.push(x);
}
for(let y = 0; y < 25; y++){
this.column.push(y);
}
console.log(this.row);
console.log(this.column);
}
},
mounted(){
this.initGraph();
}
}
</script><template>
<v-app>
<table>
<tbody>
<tr v-for="r in row" v-bind:key="r" :id="r">
<td v-for="c in column" v-bind:key="c">{{c}}</td>
</tr>
</tbody>
</table>
</v-app>
</template>