Question

我有一个组件，该组件接受一组选项对象，一个名称和一个v模型，并为该选项数组中的每个选项输出带有匹配标签的单选输入。

options = [
    {text: "Option 1", value="option-1" },
    {text: "Option 2", value="option-2" },
]


"updateValue" : function(){
    this.$emit('input', this.$refs.input.value);
}

<template v-for="option in options" >
    <input 
        :value="option.value" 
        :id="name + option.value" 
        :name="name" 
        @input="updateValue()"
        ref="input" />
    <label :for="name + option.value">{{option.text}}</label>
</template>

我在this guide中发现了类似的模式，其中采用了v模型，然后通过观看@input事件来发出值。

我无法用无线电类型的输入来解决这个问题。将:value="value"设置为例如文本输入将使所有无线电值相同，这实际上是行不通的。

Answer 1

这是一个非常原始的单选按钮组件的示例，该组件在单击条目时使用v-model更新数据：

const radio = {
  props: ['option', 'value'],
  template: `<div @click="onClick">{{ option === value ? 'o' : 'x' }}<slot /></div>`,

  methods: {
    onClick () {
      this.$emit('input', this.option)
    }
  }
}

new Vue({
  el: '#app',

  components: {
    radio
  },

  data () {
    return {
      options: ['red', 'green', 'blue'],
      selectedOption: 'red'
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <radio v-for="option in options"
    v-model="selectedOption"
    :option="option"
  >
    {{ option }}
  </radio>
</div>

通过此实现，每个单选按钮都将同时传递当前选定的值（通过v-model）和该特定选项的值（通过option）。它使用每个单选按钮中的===来确定它是否是当前选择的选项。

Vue对本机单选按钮的支持如下：

https://vuejs.org/v2/guide/forms.html#Radio

除了我叫option叫value之外，它与我的示例实际上相同。不要对它同时使用v-model和value的方式感到困惑。尽管v-model默认绑定到value和input，但实际上可以绑定到任何道具和事件（请参见https://vuejs.org/v2/api/#model）。对于本机复选框和单选按钮，它绑定到checked属性和change事件（在https://vuejs.org/v2/guide/forms.html#Basic-Usage中提到）。

更新：

我想我可能误解了您的问题。我的回答提供了相关的背景知识，但是对于您想要的东西可能是落后的。 v-model只是扩展为一个道具和一个事件，因此，如果您想用其他东西替换v-model，则只需找出它正在使用的道具和事件，然后直接使用它们即可。

没有v模型的Vue.JS无线电输入

1 个答案: