Vue.js 使用 v-on:click 和单选按钮

Question

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

超文本标记语言

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

JS

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在单选按钮上使用。我怎样才能做到这一点？（我需要在两个组件中选择角色）。

请一些帮助！

Answer 1

selectedrole每当发生更改时，您都可以使用以下方法广播该事件watch：

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

然后只需删除点击监听器即可，不需要