v-switch 在检查时返回 False 值

Question

v-switch 有问题。我在一页上有一堆。当我检查其中任何一个时，它都会返回错误值。

<v-switch
    :name="['leave_it_' + listItem.asset_id]"
    @change="setAction(listItem)"
></v-switch>

这是我的脚本。

<script>
export default {
  data() {
    return {
      updates: {
        asset_id: [],
        leave_it: {},
        image: {},
        description: {}
      },
    };
  },
  methods: {
    setAction(listItem) {
      var action = (document.querySelector('input[name="leave_it_' + listItem.asset_id + '"]:checked') ? "Leave it Alone" : "Take an Action");
      this.$set(this.updates.leave_it, listItem.asset_id, action);
    }
  },
};
</script>

当我检查 v-switch 时，DOM 元素变为

<input aria-checked="true" role="checkbox" type="checkbox" name="leave_it_1" value="">

但是更新对象变成了这样：

updates:
  leave_it:
    1:"Take an Action"

正如您所见，即使 aria-checked 为真，对象值也等于假值。

所以，请帮助我。

Answer 1

使用v-model 将v-switch 绑定到data 值，然后使用它。

<v-switch
    v-model='switchValue'
    :name="['leave_it_' + listItem.asset_id]"
    @change="setAction(listItem)"
>
</v-switch>

data: {
  return {
     switchValue: false
  }
}

var action = this.switchValue ? "Leave it Alone" : "Take an Action";

此外，您可能会完全失去:name。而不是@change，你可以watchswitchValue。这就是 Vue 方式。

watch:{
  theSwitch(newValue){
  }
}

这里是绑定多个复选框的示例。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
  js ">
</script>

<div id="app">
  <div v-for='i of count'>
    <label>
       Item {{i}}
       <input v-model=checks[i] type='checkbox'></input>  
  </label>
  </div>

  <div>Values: {{checks}}</div>
</div>


<script>
  var app = new Vue({
    el: '#app',
    data: {
      count: 10,
      checks: Array(10).fill(false),
    },
    watch: {
      checks(value) {
        console.log('value changed', value)
      }
    }
  })
</script>