Vue.js v-for中的Vuetify复选框仅在单击标签时有效

你好，我有以下声明

<li
                v-for="(area, i) in areas"
                :key="i"
                style="display: flex; justify-content: space-evenly; flex-wrap: wrap;"
              >
                <v-checkbox
                  @click="areaClick"
                  v-model="area.areaChosen"
                  :id="area.id.toString()"
                  :label="area.area_description"
                  color="beige lighten-1"
                ></v-checkbox>
              </li>

它显示如下：

我的问题是，如果你点击复选框本身（正方形），那么什么也不会发生。但是，如果你点击标签，例如大西洋海岸，那么它工作正常

---

我希望它在我单击正方形时也能工作。

这就是为什么您要使用

@click

处理程序。根据，请尝试

@change

这就是您使用

@click

处理程序的原因。根据，请尝试

@change

您也可以使用

@click.capture

这将允许您同时单击复选标记和标签

<v-checkbox
  @click.capture="areaClick"
  v-model="area.areaChosen"
></v-checkbox>

---

您也可以使用

@click.capture

这仍然允许您同时单击复选标记和标签

<v-checkbox
  @click.capture="areaClick"
  v-model="area.areaChosen"
></v-checkbox>