输入中的真/假（vuejs），可能没有 v-model答案

【问题标题】：true / false in input (vuejs), probably without v-model输入中的真/假（vuejs），可能没有 v-model
【发布时间】：2022-01-17 13:22:34
【问题描述】：

我有一个包含许多复选框的数组。

      <li v-for='item in resultQuery' :key='item.id'>
        <label class='custom-checkbox'>
          <input type='checkbox' :value='item.id' v-model='checkBrands'>
          <span @click='loadProducts(item.seoName)>{{ item.title }}</span>
        </label>
      </li>

我需要得到真或假（取决于复选框）。如何在不影响 v-model 的情况下做到这一点？（用它来传输选中复选框的数组）。

需要触发特定的突变

       .then((response) => {
          if(true) {
            this.$store.commit(
              'showFilteredList',
              response.data.items
            );
          } else {
            this.$store.commit(
              'deleteCheckboxItems',
              response.data.items
            );
          }
        });

【问题讨论】：

标签： vue.js vuejs2 vuex

【解决方案1】：

您可以在复选框上使用@change。

示例：https://codepen.io/koei5113/pen/ZEXLLgL

<input type='checkbox' :value='item.id' v-model='checkBrands' @change="changeEvent">

methods: {
    ...,
    changeEvent($event) {
        console.log($event.target.checked);
    }
}

在此示例中，您可以看到您的 v-model 仍在工作，您仍然可以通过更改事件检查复选框状态。

【讨论】：

【解决方案2】：

v-model 忽略输入中的:value。你需要使用:checked和@change

例如，当您发出更改事件时，请使用您的函数。

<input type="checkbox" :checked="value" @change="changeArrayNotValue" />

【讨论】：