阻止用户在Vue Js中有条件地更改复选框值?

Question

**如何防止用户在没有权限的情况下编辑复选框值。如果用户没有编辑权限，我想显示模型。因此，禁用输入框不起作用**

Vue.component('edit-deal', 
data: function(){
showDeal: true,
hasPermission: false
},
template:`
<label>Show deals </label>
<input type="checkbox" v-model="showDeal">
`
)

Answer 1

您可以在复选框的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>