根据 created() 数据打开/关闭多个切换按钮答案

【问题标题】：Switch multiple toggle buttons on/off based on created() data根据 created() 数据打开/关闭多个切换按钮
【发布时间】：2021-09-18 03:54:12
【问题描述】：

我有多个切换按钮，如果该值存在于我通过 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”的那个也会被关闭。我的绑定哪里出错了？

【问题讨论】：

这些不是复选框，它们只是纯文本字段？您应该将 type="checkbox" 添加到您的输入中。还是我在这里遗漏了什么？
@TomTruyen 我已将它们添加到我的代码中，但由于代码太多而在此处删除了它们。我现在已经更新了代码。即使 type="checkbox" 也存在问题。

标签： html css vue.js vuejs2 vuetify.js

【解决方案1】：

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

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

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

【讨论】：

我添加了 true-value:"active" 和 false-value:"disabled"，但现在都启用了。所有 exif、iptc 和 jfif 均已启用。我只想要 exif 和 iptc 但是..！
你是用:而不是=，还是打错字了？

【解决方案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"]
    });
}

【讨论】：