Vue.js使用v-on：使用单选按钮单击

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

请帮忙！

Answer 1

您可以随时播放使用watchselectedrole变化的情况下：

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

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