在 VueJS 槽循环中创建 select 所有复选框

Question

我创建了一些数据，这些数据通过循环显示为 table。该代码看起来不错，但是在我的方法中出现错误 'page is not defined'。有谁知道我该如何定义它？

Table:

<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"

在 VueJS 槽循环中创建 select 所有复选框

Creating select all checkbox in VueJS trough loop

loops

vue.js

methods

undefined