VueJS комплекс V-If

Question

Я хочу показать кнопку ТОЛЬКО, если выполнены два условия.Сначала я пытаюсь использовать v-if только с одним условием:

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

, используя только одно условие за раз, кнопка отображается, поэтому я думаю, что оба условия выполняются.Если я использую:

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

Кнопка не отображается.$ can - это миксин, чтобы проверить, есть ли у пользователя разрешение на что-то.

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

Не знаю, почему это не работает ...

Answer 1

Я бы предложил использовать функцию, а затем использовать в v-if.

пример

v-if="isButtonShow()"

и ниже часть метода:

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

Answer 2

Очевидно, что любые последующие 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>