Question

仅当满足两个条件时，我才想显示一个按钮。首先，我尝试一次仅在一种情况下进行v-if操作：

v-if="editMode"
v-if="$can('customersdelete')"

一次只使用一个条件，该按钮就会显示，所以我认为这两个条件都是正确的。如果我使用：

v-if="editMode && $can('customersdelete')"

该按钮不显示。 $ can是一个mixin，用于验证用户是否有权执行某项操作。

<script>
  export default {
    methods: {
      $can(permissionName) {
        return Permissions.indexOf(permissionName) !== -1;
      },
    },
  };
</script>

我不知道为什么这不起作用...

Answer 1

显然，任何后续的v-if都将被忽略，并且仅考虑第一个，如以下示例所示：

Vue.config.devtools = false;
Vue.config.productionTip = false;

const Permissions = ['customersdelete'];
new Vue({
  el: '#app',
  data() {
    return { editMode: true };
  },
   methods: {
    $can(permissionName) {
      return Permissions.indexOf(permissionName) !== -1;
    },
  },
})

code {
  background-color: #f5f5f5;
  border: 1px solid #eee;
  padding: 2px 5px;
  color: red;
  border-radius: 3px;
  display: inline-block;
}
div {
  margin-top: 3px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <label><input type="checkbox" v-model="editMode">editMode</label><br><br>
  
  <div>$can('customersdelete') => <code v-text="$can('customersdelete')"></code></div>
  <div>editMode => <code v-text="editMode"></code></div>
  <hr />
  <div v-if="$can('customersdelete')">
    <code>v-if="$can('customersdelete')"</code>
  </div>
  <div v-if="editMode">
    <code v-if="editMode">v-if="editMode"</code>
  </div>
  <div v-if="editMode && $can('customersdelete')">
    <code>v-if="editMode && $can('customersdelete')"</code>
  </div>
  <div v-if="editMode"
       v-if="$can('customersdelete')">
    <code>v-if="editMode" v-if="$can('customersdelete')"</code>
  </div>
  <div v-if="$can('customersdelete')"
       v-if="editMode">
    <code>v-if="$can('customersdelete')" v-if="editMode"</code>
  </div>
</div>

Answer 2

我建议先使用函数，然后在v-if中使用。

示例

v-if="isButtonShow()"

和下面是方法部分：

methods:{
isButtonShow(){
  if(this.editMode){
    if(this.$can('customersdelete'){
      return true;
    }
  }
 return false;
 }
}

VueJS复合v-if

2 个答案: