用收音机创建自己的Vue2组件，如何更改值答案

【问题标题】：Create own Vue2 component with radio, how to change value用收音机创建自己的Vue2组件，如何更改值
【发布时间】：2018-06-27 23:13:31
【问题描述】：

我正在尝试使用单选按钮创建一个自定义组件，但只能使用标签的值而不是值属性来获得工作方式。

例如，改为标签 1、2、3 => 显示标签“全部”、“私人”、“专业”并获取值 1、2、3

代码 sn-p 不工作，但 external link 到代码框工作。

Vue.component('radio-button', {
  props: ['name', 'label', 'value'],
  template: `
    <label class="radio">
      <input type="radio" :value="label" :name="name" v-model="radioButtonValue">
      <span>{{ label }}</span>
    </label>
  `,
  
  computed: {
      radioButtonValue: {
        get: function() {
          return this.value
        },

        set: function() {
          this.$emit("change", this.label)
        }
      }
});


Vue.component('example-form', {
  template: `
     <div class="row">
    <div class="col-lg-1 col-centered">
      Test for component with radio buttons
    </div>
    <div>
      <radio-button name="options" label="1" :value="selectedAdvertiser" @change="changeAdvertiser"/>
      <radio-button name="options" label="2" :value="selectedAdvertiser" @change="changeAdvertiser"/>
      <radio-button name="options" label="3" :value="selectedAdvertiser" @change="changeAdvertiser"/>
      <hr>
      <div class="result">
        Radio button selection: {{selectedAdvertiser}}
      </div>
    </div>
  </div>
  `,
  data: function() {
    return {
      selectAdvertiser: "1"
    }
  },
  methods: {
    changeAdvertiser: function(newValue) {
      this.selectedAdvertiser = newValue
    }
  }
});

var App = new Vue({
  el: '#my-app"
  template: `<example-form></example-form>`
});

<script src="https://unpkg.com/vue"></script>
<body>
    <div id="my-app"></div>
</body>

【问题讨论】：

标签： javascript binding vuejs2 vue-component

【解决方案1】：

问题在于你使用价值的方式。

在 DropDownComponent.vue 中：

  <radio-button name="options" label="1" :value="selectedAdvertiser" @change="changeAdvertiser"/>
  <radio-button name="options" label="2" :value="selectedAdvertiser" @change="changeAdvertiser"/>
  <radio-button name="options" label="3" :value="selectedAdvertiser" @change="changeAdvertiser"/>

所有 3 个单选按钮的值都相同，但应该是所选单选按钮选项的唯一值。

例如：

  <radio-button name="options" label="1" value="One" @change="changeAdvertiser"/>
  <radio-button name="options" label="2" value="Two" @change="changeAdvertiser"/>
  <radio-button name="options" label="3" value="Three" @change="changeAdvertiser"/>

此外，如果您发出 input 而不是 change，您的 DropDownComponent 可以按以下方式访问该值：

  <radio-button name="options" label="1" value="One" v-model="selectedAdvertiser"/>
  <radio-button name="options" label="2" value="Two" v-model="selectedAdvertiser"/>
  <radio-button name="options" label="3" value="Three" v-model="selectedAdvertiser"/>

【讨论】：

对不起。我什么都不懂。如果更改 DropDownComponent，1 或 2 示例？那么，它的单选按钮组件是什么。我尝试了几种选择，但没有得到解决方案。谢谢@AlexSmartSky