时间戳

首页 > 解决方案 > 没有 v-model 的 Vue.JS 无线电输入

vue.js - 没有 v-model 的 Vue.JS 无线电输入

问题描述

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

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>

我在本指南中发现了一个类似的模式，其中采用 v 模型，然后通过观察@input事件发出值。

我无法用无线电类型的输入来解决如何做到这一点。设置:value="value"为说文本输入将使所有单选值相同，这实际上是行不通的。

标签： vue.jsvue-component

解决方案

这是一个非常原始的单选按钮组件的示例，用于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>

使用此实现，每个单选按钮都会传递当前选定的值（via v-model）以及该特定选项的值（via 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属性和事件（在https://vuejs.org/v2/guide/forms.html#Basic-Usagechange中提到）。

更新：

我想我可能误解了你的问题。我的回答提供了相关的背景，但对于你想要的可能是倒退的。v-model只是扩展为一个道具和一个事件，所以如果你想v-model用其他东西替换你只需要找出它正在使用的道具和事件并直接使用它们。

推荐阅读