在 VueJS 槽循环中创建全选复选框

Question

我创建了一些通过循环显示为表格的数据。 该代码看起来不错，但是在我的方法中我收到错误“未定义页面”。 有谁知道我如何定义它？

表：

<tr v-for="page in pages" v-bind:key="page">
                <td>
                  <input type="checkbox" v-model="pageIds" @click="select" :value="page.id">
                </td>
                <td>{{page.name}}</td>
                <td>
                  <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                      <span v-bind="attrs" v-on="on"
                        ><v-icon class="icon delete">mdi-delete</v-icon></span
                      >
                    </template>
                    <span>Delete Page</span>
                  </v-tooltip>
                </td>
              </tr>

方法：

    <script>
export default {
  data: () => ({
    pages: [
      {"id":"/","name":"/"},
      {"id":"/index","name":"/index"},
      {"id":"/about-us","name":"/about-us"}
    ],
    selected: [],
    allSelected: false,
    pageIds: []
  }),

  methods: {
        selectAll: function() {
            this.pageIds = [];

            if (this.allSelected) {
                for (page in this.pages) {
                    this.pageIds.push(this.pages[page].id.toString());
                }
            }
        },
        select: function() {
            this.allSelected = false;
        }
    }
};
</script>

Answer 1

在您的代码中更改此项。它会解决你的错误

来自

v-for="page in pages" v-bind:key="page"

到

v-for="(page, index) in pages"
v-bind:key="index"