根据 created() 数据切换多个切换按钮 on/off

Question

我有多个切换按钮，如果我通过 created() 获得的响应中存在该值，则应选择每个切换按钮。

          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                v-model="selectedCategories.jfif"
                :checked="selectedCategories.jfif === 'active'" />
         </li>,
          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                v-model="selectedCategories.exif"
                :checked="selectedCategories.exif === 'active'" />
         </li>,
          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                v-model="selectedCategories.iptc"
                :checked="selectedCategories.iptc === 'active'" />
         </li>

我有多个列表包含在一个 ul 中。脚本如图：

export default {
  data() {
    return {
      selectedCategories: {},
    };
  },
  methods: {
    toggleCheckbox(event) {
      console.log("Event is,", event, event.value);
    },
  },
  created() {
      //this is how i get the response
      this.selectedCategories = {"exif":"active","iptc":"active"}
    });

问题是，如果我得到的数据为：{"exif":"active","iptc":"active"} 在这种情况下 jfif 不存在。所有拨动开关均已关闭。即使是有“exif”和“iptc”的那个也会被关闭。我的绑定哪里出错了？

Answer 1

将 v-model 与 checked 一起使用没有多大意义，因为 v-model 设置了 checked 本身。阅读有关复选框的 Vue 文档：https://vuejs.org/v2/guide/forms.html#Checkbox-1

而不是 checked 您需要使用 true-value 和 false-value 属性，因此在您的情况下 true-value="active" 并取决于您要使用的内容，例如， false-value="" 用于空字符串，或 :false-value="null" 用于 null（注意 : 否则您将得到一个字符串 "null"）。

这是一个工作示例：https://jsfiddle.net/kgewf04d/1/

Answer 2

我没有使用字典，而是使用列表进行绑定，并为每个 li 提供了一个值参数。

          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                value="exif"
                v-model="checkedCategories"
         </li>
          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                value="jfif"
                v-model="checkedCategories"
         </li>
          <li>
              <input
                v-on:click="toggleCheckbox($event)"
                type="checkbox"
                value="iptc"
                v-model="checkedCategories"
         </li>

现在我得到 ["exif","iptc"]

格式的响应

data(){
    return checkedCategories: []
    },
  created() {
      this.checkedCategories = ["exif","iptc"]
    });
}

根据 created() 数据切换多个切换按钮 on/off

Switch multiple toggle buttons on/off based on created() data

html

css

vue.js

vuejs2

vuetify.js