**如果用户没有权限，如何防止用户编辑复选框值。如果用户没有编辑权限，我想显示模型。因此，禁用输入框将不起作用**
Vue.component('edit-deal',
data: function(){
showDeal: true,
hasPermission: false
},
template:`
<label>Show deals </label>
<input type="checkbox" v-model="showDeal">
`
)
您可以click在复选框上设置一个事件侦听器，如果没有权限，emit则向父组件显示一个事件以显示模式：
const editdeal = Vue.component('edit-deal', {
template: '#edit-deal',
data: () => ({ showDeal: true, hasPermission: false }),
methods: {
checkPermission(event) {
if(!this.hasPermission) {
this.$emit("show_modal");
event.preventDefault();
}
},
},
});
new Vue({
el: '#app',
components: { editdeal },
data: () => ({ showModal: false }),
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div><editdeal @show_modal="showModal=true"/></div>
<div v-if="showModal">No Permission Modal</div>
</div>
<template id="edit-deal">
<div>
<label>Show deals </label>
<input type="checkbox" v-model="showDeal" @click="checkPermission">
</div>
</template>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句