vue.js 从多个复选框获取值并输入到数组

toe95027  于 2022-12-14  发布在  Vue.js
关注(0)|答案(1)|浏览(310)

我们如何才能得到一个数组的输入的复选框的值?
下面是我的代码,我已经试过了:
第一个
这就是cbComp模板:

<template>
  <label class="checkbox">
    <input
      :id="cb"
      type="checkbox"
      :value="modelValue"
      v-model="computedValue"
    >
    <label
      :for="cb">
      <slot/>
    </label>
  </label>
</template>

这是JavaScript:

export default {
  data: {
    updateValue: this.value
  },
  props: {
    value: undefined,
    modelValue: {
      type: undefined,
      default: false
    }
  },
  computed: {
    computedValue: {
      get () {
        return this.updateValue
      },
      set (value) {
        this.updateValue = value
        this.$emit('input', value)
      }
    }
  },
  watch: {
    value (value) {
      this.updateValue = value
    }
  }
}

结果显示没有错误,并且所选名称不会出现在{{ selected_name }}

twh00eeo

twh00eeo1#

只需将v-model绑定到selected_name属性即可。

<html>
<div id="app">
  <p>Names: {{ selected_name.join(', ') }}</p>

  <label for="maxCheckbox">Max</label>
  <input type="checkbox" value="Max" v-model="selected_name" id="maxCheckbox">
  
  <label for="markCheckbox">Mark</label>
  <input type="checkbox" value="Mark" v-model="selected_name" id="markCheckbox">
 
  <label for="johnCheckbox">John</label>
  <input type="checkbox" value="John" v-model="selected_name" id="johnCheckbox">
</div>

<script src="https://unpkg.com/vue@2"></script>
<script>
  new Vue({
    el: '#app',
    data() {
      return {
        selected_name: []
      }
    }
  });
</script>
</html>

顺便说一句,我可能会将您的selected_name重命名为selected_names,这样更清楚,或者更常见的是,您会发现selectedNames camelCase。

相关问题