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

Question

I'm trying to create a custom component with radio buttons, but only get a way for work using value of label, instead a value prop. 我试图用单选按钮创建一个自定义组件，但只能使用label的值而不是value属性来获得工作的方式。

Example, instead label 1, 2, 3 => Display label "All", "Private", "Professional" and get value 1,2,3 例如，代替标签1、2、3 =>显示标签“ All”，“ Private”，“ Professional”并获取值1,2,3

Code snippet not work but external link to codesandbox works. 代码段不起作用，但是到codeandbox的外部链接起作用。

 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>

Answer 1

The problem is the way you are using value. 问题在于您使用价值的方式。

In DropDownComponent.vue: 在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"/>

The value is identical in all 3 radio buttons but should be the unique value of that radio-button option is selected. 该值在所有三个单选按钮中均相同，但应为已选择该单选按钮选项的唯一值。

eg: 例如：

  <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"/>

also, if you emit input instead of change , your DropDownComponent can access the value as per following: 同样，如果发出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"/>

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

问题描述

1 个解决方案

解决方案1
0 2018-01-18 19:53:38

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

问题描述

1 个解决方案

解决方案1 0 2018-01-18 19:53:38

解决方案1
0 2018-01-18 19:53:38