v-checkbox 对模型没有反应

Question

我正在使用 vue 和 vuetify 设置一个简单的对话框。该对话框显示所有意大利地区的复选框列表和一个必须 select 预定义区域组的绿色按钮。

当我单击绿色按钮时，模型会正确更新（单击另一个按钮，即蓝色按钮，在控制台中我已正确填充 selectedRegions 对象）但复选框不会更改。如果我与复选框正常交互，我会得到方面的行为。

这是模板：

<template>
  <v-card>
    <v-card-title class="text-h5 grey lighten-2">
      {{ $t("regionalDetails") }}
    </v-card-title>
    <v-card-text>
      <v-row>
        <v-col cols="3" v-for="region in regions" :key="region.id">
          <v-checkbox
            dense
            v-model="selectedRegions[region.id]"
            :hide-details="true"
            :label="region.name"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col class="text-right" cols="12">
          <v-btn class="mr-3" color="success" @click="setAreaRegions()">{{
            $t("selectArea")
          }}</v-btn>
          <v-btn color="info" @click="showReport()">{{ $t("viewDetails") }}</v-btn>
        </v-col>
      </v-row>
    </v-card-text>
    <v-divider></v-divider>
    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn color="grey" text class="body-2 font-weight-bold" @click.native="cancel">{{
        $t("buttons.close")
      }}</v-btn>
    </v-card-actions>
  </v-card>
</template>

这是js：

export default {
  async created() {
    const response = await apiService.get("regions", null, true);

    if (response.error) {
      this.$store.set("app/flash", response.toAlert());
      this.$emit("rsClosed");
    } else {
      this.regions = response.data;
    }
  },
  data() {
    return {
      regions: [],
      selectedRegions: {}
    };
  },
  methods: {
    cancel() {
      this.$emit("rsClosed");
    },
    setAreaRegions() {
      for (let region of this.regions) {
        this.selectedRegions[region.id] =
          ["Abruzzo", "Emilia Romagna", "Liguria", "Marche", "Toscana"].indexOf(region.name) != -1;
      }
    },
    showReport() {
      let regions = [];

      Object.entries(this.selectedRegions).forEach(([id, checked]) => {
        if (checked) {
          regions.push(id);
        }
      });
      console.log(regions);
    }
  },
  name: "RegionSelector",
  props: {
    dialog: Boolean
  }
};

最后是服务器数据：

[
  {
    id: "cc267d02-f3a3-11eb-aa6c-0242ac130003",
    name: "Abruzzo"
  },
  {
    id: "cc267e55-f3a3-11eb-aa6c-0242ac130003",
    name: "Basilicata"
  },
  {
    id: "cc267f2f-f3a3-11eb-aa6c-0242ac130003",
    name: "Calabria"
  },
  {
    id: "cc267f8f-f3a3-11eb-aa6c-0242ac130003",
    name: "Campania"
  },
  {
    id: "cc267fe7-f3a3-11eb-aa6c-0242ac130003",
    name: "Emilia Romagna"
  },
  {
    id: "cc26803d-f3a3-11eb-aa6c-0242ac130003",
    name: "Friuli Venezia Giulia"
  },
  {
    id: "cc26808e-f3a3-11eb-aa6c-0242ac130003",
    name: "Lazio"
  },
  {
    id: "cc2680d9-f3a3-11eb-aa6c-0242ac130003",
    name: "Liguria"
  },
  {
    id: "cc26812a-f3a3-11eb-aa6c-0242ac130003",
    name: "Lombardia"
  },
  {
    id: "cc268176-f3a3-11eb-aa6c-0242ac130003",
    name: "Marche"
  },
  {
    id: "cc2681ce-f3a3-11eb-aa6c-0242ac130003",
    name: "Molise"
  },
  {
    id: "cc268218-f3a3-11eb-aa6c-0242ac130003",
    name: "Piemonte"
  },
  {
    id: "cc268266-f3a3-11eb-aa6c-0242ac130003",
    name: "Puglia"
  },
  {
    id: "cc2682b0-f3a3-11eb-aa6c-0242ac130003",
    name: "Sardegna"
  },
  {
    id: "cc2682f9-f3a3-11eb-aa6c-0242ac130003",
    name: "Sicilia"
  },
  {
    id: "cc268345-f3a3-11eb-aa6c-0242ac130003",
    name: "Toscana"
  },
  {
    id: "cc268390-f3a3-11eb-aa6c-0242ac130003",
    name: "Trentino Alto Adige"
  },
  {
    id: "cc2683e0-f3a3-11eb-aa6c-0242ac130003",
    name: "Umbria"
  },
  {
    id: "cc26842a-f3a3-11eb-aa6c-0242ac130003",
    name: "Valle d\u0027Aosta"
  },
  {
    id: "cc268474-f3a3-11eb-aa6c-0242ac130003",
    name: "Veneto"
  }
]

我已经在 https://jsfiddle.net/MirkoD/h41cxgk9/16/

设置了一个 jsfiddle

有什么建议吗？

谢谢

Answer 1

问题是 Vue 不拦截模型中的任何更改，不知道为什么！我解决了在 v-card 组件中放置一个关键参数的问题：

<v-card :key="componentKey">

在数据中我将 componentKey 初始化为 0:

data() {
  return {
    componentKey: 0,
    regions: [],
    selectedRegions: {}
  };
},

最后在 setAreaRegions 方法中，我增加了密钥：

setAreaRegions() {
  for (let region of this.regions) {
    this.selectedRegions[region.id] =
      ["Abruzzo", "Emilia Romagna", "Liguria", "Marche", "Toscana"].indexOf(region.name) != -1;
  }
  this.componentKey += 1;
},

这样我们强制 Vue 重绘组件并应用看不见的更改。

v-checkbox 对模型没有反应

v-checkbox does not react to model

vuejs2

vuetify.js