vuejs multiple v-if on one element-CodePudding

sup, so I have a problem with v-if in vue.

basicly I have a v-for that loops thru array and inside that v-for I have a couple of elements with v-if

<button v-if="Collection.status" type="button">deactivate</button>
<button v-else type="button">activate</button>

but I would also like to disable "activate" buttons if a data variable (disableButton) is true. How could I do that?

Its maybe a silly question but im new to vue and i have been searching for this for to long.

CodePudding user response：

Try like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      Collections: [{id: 1, status: true}, {id: 2, status: false}, {id: 3, status: true}],
      disableButton: true
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="Collection in Collections" :key="Collection.id">
      <button v-if="Collection.status" type="button" >deactivate</button>
      <button v-else :disabled="disableButton" type="button">activate</button>
    </li>
  </ul>
</div>

CodePudding user response：

are you looking for this?

<button v-else type="button" disable="Collection.disableButton">activate</button>