文章/答案/技术大牛

发布

社区首页 >问答首页 >使用radio创建自己的Vue2组件，如何更改值

问使用radio创建自己的Vue2组件，如何更改值
EN

Stack Overflow用户

提问于 2018-01-19 03:17:08

回答 1查看 57关注 0票数 0

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

例如，取而代之的是标签1、2、3 =>显示标签“全部”、“私有”、“专业”，并得到值1、2、3

代码片段不起作用，但external link to codesandbox起作用。

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

Stack Overflow用户

发布于 2018-01-19 03:53:38

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48328785

复制

相似问题

问使用radio创建自己的Vue2组件，如何更改值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用radio创建自己的Vue2组件，如何更改值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用radio创建自己的Vue2组件，如何更改值
EN