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.
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>are you looking for this?
<button v-else type="button" disable="Collection.disableButton">activate</button>