Question

我有一系列复选框，这些复选框与v-model绑定了一个值。

然而，当你来到页面时，我需要预先检查一些复选框。我无法使用:checked绑定，因为我正在使用v-model，我需要使用v模型将值传递给我的checkedNames数组。

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" PRE-CHECK-THIS-CHECKBOX>
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>


new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

Answer 1

我采取了一些自由来修改一些事情，但这会得到你想要的东西：

<div id='example-3'>
 <div v-for="(item, index) in names" :key="index">
  <input type="checkbox" :id="item.name" v-model="item.checked">
  <label :for="item.name">{{ item.name }}</label>
 </div>
 <span>Checked names: {{ checkedNames }}</span>
 </div>

new Vue({
  el: '#example-3',
  data() {
    return {
      names: [{
        name: 'jack',
        checked: true
      }, {
        name: 'john',
        checked: false
      }, {
        name: 'mike',
        checked: false
      }]
    }
  },
  computed: {
     checkedNames () {
        return this.names.filter(item => item.checked).map(name => name.name)
     }
  }
})

还有一个工作小提琴：https://jsfiddle.net/aj6apozq/8/

Answer 2

您可以在输入中使用mounted()挂钩和ref属性。

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" 
    ref="precheck" PRE-CHECK-THIS-CHECKBOX>
   ...
</div>

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  },
  mounted() { 
    this.checkedNames.push(this.$refs.precheck.value)
  }
})

使用Vuejs和v-model预先检查复选框

2 个答案: