未更新Vue数组内容

Question

我想使用我创建的函数将一个数字添加到这个列表中，但是，数据不更新。 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

Answer 1

如果您直接修改数组，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>