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

Question

嗨，有以下说法。

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

它显示如下：

我的问题是，如果您单击复选框本身（正方形），那么什么也不会发生，但是，如果您单击标签，例如Atlantic Seaboard，则它可以正常工作。

我也希望在单击正方形时也能使用。

Answer 1

这就是为什么您使用@click处理程序。根据{{​​3}}，尝试@change

Answer 2

您也可以使用@click.capture，这仍然允许您同时单击选中标记和标签。

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