5

我希望始终至少选中一个复选框，但我混合了v-model和的概念:checked。

医生说：

v-model将忽略在任何表单元素上找到的初始或属性value。它将始终将 Vue 实例数据视为事实来源。checkedselected

我可以阻止我的模型被修改，但我不能阻止复选框被选中......

一些代码：

模板

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>

该模型userOutputSeries

data () {
  return {
    userOutputSeries: {
      foo: {
        display: 'Awesome Foo',
        active: true
      },
      bar: {
        display: 'My Bar',
        active: false
      }
    }
  }
}

处理preventIfLessThanOneChecked程序

preventIfLessThanOneChecked (event) {
  // I don't update the model so it stay at the same state
  // But only need to count the active series and do what we want.
  console.log(event.target.value, event.target.checked)
}

有什么想法可以阻止本机复选框传播吗？

4

3 回答 3

5

您应该使用v-model代替，:checked以便对userOutputSeries数据属性的更改将反映在复选框输入中。

然后，将s引用从传递给方法，如果没有复选框，则v-for将该对象的active属性设置为：trueactive

new Vue({
  el: '#app',
  data() {
    return {
      userOutputSeries: {
        foo: {
          display: 'Awesome Foo',
          active: true
        },
        bar: {
          display: 'My Bar',
          active: false
        }
      }
    }
  },
  methods: {
    preventIfLessThanOneChecked(item) {
      if (item.active) {
        return;
      }
    
      let items = Object.values(this.userOutputSeries);
      if (!items.find(i => i.active)) {
        item.active = true;
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
  <div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
    <input type="checkbox" :id="id" :value="id" @change="preventIfLessThanOneChecked(s)" v-model="s.active">
    <label :for="id">{{ s.display }}</label>
  </div>
</div>

于 2017-10-10T16:51:34.347 回答
1

尝试disabled在您的单个选中复选框上使用：

<div class="wrapper" v-for="(s, id) in userOutputSeries" :key="id">
  <input type="checkbox" :id="id" :value="id"
      :disabled="(s.active && numberOfChecked == 1) ? disabled : null"
      @change="preventIfLessThanOneChecked" :checked="s.active">
  <label :for="id">{{ s.display }}</label>
</div>
于 2017-10-10T16:44:36.230 回答
1

在@thanksd 给出的上述答案中，我的复选框仍未选中。所以我正在写我的解决方案。

这是我的循环语句，根据您的文件更改变量名称。

v-for="column in tableColumns"

这是我的输入（如果可见为真，则选中复选框）

<input type="checkbox" v-model="column.visible" @change="event => visibleColumnsChanged(column, event)">

然后在我的更改方法中 - 如果没有可见项目，请将 column.visible 设置为 true - 使用 event.target.checked = true 再次检查复选框。

visibleColumnsChanged: function(column, event){
  if (column.visible) {
    return;
  }

  if(! this.tableColumns.find(c => c.visible)){
    column.visible = true;

    event.target.checked = true;
  }
}
于 2019-10-17T16:16:35.697 回答