Vue.js 使用 v-on:click 与单选按钮答案

【问题标题】：Vue.js use v-on:click with a radiobuttonVue.js 使用 v-on:click 与单选按钮
【发布时间】：2016-06-14 08:35:24
【问题描述】：

如何在单选按钮上使用$dispatch() 或$broadcast()？我不能这样做（因为我不能在单选按钮上使用v-on:click）：

HTML

 <div class="radio radio-primary">
     <label>
         <input type="radio" name="intern" id="intern" value="intern" 
                v-on:click="update" v-model="selectedrole"/>
             Showall
      </label>                          
</div>

Vue.component('searchemployees', {
    template: '#searchemployees',
    data: function()
    {
        return {
            selectedrole: ''
        }
    },
    methods: {
        update: function()
        {
            this.$dispatch('selectedRole', this.selectedrole)
        }
    }
});

Vue.component('employees', {
    template: '#employees',
    props:['list'],
    data: function()
    {
        return {
            role: ''
        }
    },
    created() {
        this.list = JSON.parse(this.list);
    },
    events: {
        'selectedrole': function(role) {
            this.role = role
        }
    }
});

因为我不能在单选按钮上使用v-on:click。我怎样才能做到这一点？（我需要在 2 个组件中选择角色）。

请帮忙！

【问题讨论】：

这似乎是您以不同的方式提出原始问题：stackoverflow.com/questions/35727169/…。您应该刚刚更新了原始问题。

标签： javascript vue.js

【解决方案1】：

您可以在 selectedrole 更改时使用 watch 广播该事件：

Vue.component('searchemployees', {
  template: '#searchemployees',
  data: function()
    {
      return {
        selectedrole: ''
      }
    },
    watch: {
      selectedrole: function(newRole)
      {
        this.$dispatch('selectedRole', newRole)
      }
    }
});

那就去掉点击监听，不需要

【讨论】：