vuejs multiple v-if on one element

Question

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.

Disable or hide the activate button? (your example is hiding [not rendering] it) — Steve Hynding
– Steve Hynding, Commented Oct 14, 2021 at 21:06
Basicly if "Activate" button renders and data variable is true I'd also like to disable that button @SteveHynding — iSnuff
– iSnuff, Commented Oct 14, 2021 at 21:09
Do you still want to hide/not-render the "activate" button if Collection.status evaluated to true? — Steve Hynding
– Steve Hynding, Commented Oct 14, 2021 at 21:16

Nikola Pavicevic · Accepted Answer · 2021-10-14 21:31:38Z

1

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>

answered Oct 14, 2021 at 21:31

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SoroushOwji · Accepted Answer · 2021-10-14 21:27:14Z

0

are you looking for this?

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

answered Oct 14, 2021 at 21:27

SoroushOwji

1238 bronze badges

Collectives™ on Stack Overflow

vuejs multiple v-if on one element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related