Question

当我点击下一个按钮时，我想删除复选框选中状态，但我不使用vue删除它。这是演示代码：

new Vue({
  el: "#app",
  data: {
    id:0, 
    items: [
    {'id':1,'name':'chk-a','options':['a1','b1','c1','d1']},
    {'id':2,'name':'chk-b','options':['a2','b2','c2','d2']},
    {'id':3,'name':'chk-c','options':['a3','b3','c3','d3']},
    {'id':4,'name':'chk-d','options':['a4','b4','c4','d4']},
    ]
  },
  methods: {
    next: function (id) {
      if(id<this.items.length){
        this.id++ 
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <h1>Checkbox</h1>
  <div v-for="item in items[id].options">
    <input type="radio" name="chk" :id="id">
    <label for="two">{{item}}</label>
  </div>
  <button @click="next(id+1)">Next</button>
</div>

Answer 1

看起来您有一个表单的四个部分，并希望用户从每个表单中选择一个选项。如果是，请考虑使用字段selected_option或类似内容并使用v-model：

＆＃13;

new Vue({
  el: "#app",
  data: {
    id:0, 
    items: [
    {'id':1,'name':'chk-a','options':['a1','b1','c1','d1'], 'selected_option': ''},
    {'id':2,'name':'chk-b','options':['a2','b2','c2','d2'], 'selected_option': 'c2'},
    {'id':3,'name':'chk-c','options':['a3','b3','c3','d3'], 'selected_option': ''},
    {'id':4,'name':'chk-d','options':['a4','b4','c4','d4'], 'selected_option': ''},
    ]
  },
  methods: {
    next: function (id) {
      if(id<this.items.length){
        this.id++ 
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <h1>Checkbox</h1>
  <div v-for="item in items[id].options">
    <input type="radio" :name="items[id].name" :id="id" v-model="items[id].selected_option" :value="item">
    <label for="two">{{item}}</label>
  </div>
  <button @click="next(id+1)">Next</button>
</div>

＆＃13;

请注意，上面的内容在第二部分中自动选择'c2'。这是为了向您展示v-model使用复选框的默认值的示例，并向您显示预期数据的外观。稍后检索这些值可以通过迭代items并拉出相应的selected_option值来轻松完成。

同样，您只需将checked字段的值设置为''即可删除selected_option状态。

如何清除复选框已检查状态？与vue

1 个答案: