时间戳

首页 > 解决方案 > Vue 无法检查最近未选中的复选框，甚至它的绑定

javascript - Vue 无法检查最近未选中的复选框，甚至它的绑定

问题描述

我有一个复选框列表，当我单击第 4 个输入框时，我想要所有先前的框都被选中，其余的框都未选中。我几乎做到了，但是有一个问题，当我回到那些选中的框并取消选中其中一个时，它仍然可以并且下一个未被选中，但是当再次前进并从那些未选中的最近未选中的项目中检查另一个时仍然未检查且未更改。

这是演示，我认为 GIF 会更好地描述我的问题。 在此处输入图像描述

演示https://jsfiddle.net/j5dpkut8/1/

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="checkbox" v-model="checked[0]" value="0" @change="printState(0)"> checked 0 <br>
  <input type="checkbox" v-model="checked[1]" value="1" @change="printState(1)"> checked 1 <br>
  <input type="checkbox" v-model="checked[2]" value="2" @change="printState(2)"> checked 2 <br>
  <input type="checkbox" v-model="checked[3]" value="3" @change="printState(3)"> checked 3 <br>
  <input type="checkbox" v-model="checked[4]" value="4" @change="printState(4)"> checked 4 <br>
  <input type="checkbox" v-model="checked[5]" value="5" @change="printState(5)"> checked 5 <br>
  <input type="checkbox" v-model="checked[6]" value="6" @change="printState(6)"> checked 6 <br>
  <input type="checkbox" v-model="checked[7]" value="7" @change="printState(7)"> checked 7 <br>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    checked: [
      false,false,false,false,false,false,false,false,
    ],
  },
  methods: {
    printState(x) {
      this.checked = [
      false,
      false,
      false,
      false,
      false,
      false,
      false,
      false,
    ],
    for (let i = 1; i < this.checked.length; i++) {
        if (i <= x) {
          this.checked[i] = true;
        }
      }
     console.log(this.checked);
    
    },
  }
})

标签： javascriptformsvue.jscheckboxvuejs2

解决方案

正如@TigranAbrahamyan 提到的，@click将修复它。但这是一个非常少行的解决方案，它也按预期使用v-model和value让您轻松调整框的数量。

new Vue({
  el: "#app",
  data: () => ({ num: 10, values: [] }),
  methods: {
    mark(index) {
      this.values = [...Array(index).keys()];
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="index in num" :key="index-1">
     <input type="checkbox" v-model="values" :value="index-1" @click="mark(index-1)" />
  </div>
</div>

推荐阅读