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

Question

如何在单选按钮上使用 $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>

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

请帮忙！

Answer 1

只要 selectedrole 使用 watch 发生变化，您就可以广播事件：

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

然后只需删除点击侦听器，不需要

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

Vue.js use v-on:click with a radiobutton

javascript

vue.js