时间戳

首页 > 解决方案 > 防止用户在 Vue Js 中有条件地更改复选框值？

javascript - 防止用户在 Vue Js 中有条件地更改复选框值？

问题描述

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

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

标签： javascriptvue.js

解决方案

您可以在复选框上设置事件侦听器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>

推荐阅读