Vue js validation
I have below code, I would like to disbale the checkbox if item.status == "active". I have tried :disbale="item.status='active'" into my checkbox. With below code, checkbox becomes gray but its still clickable. How can I make it disbale and not clickable?
<div v-for="(item, index) in data" :key="index">
<div v-if="item">
<div >
<q-checkbox dense v-model="item.selected"/>
</div>
</div>
</div>
```
CodePudding user response:
Observations :
- Attribute name should be
:disabled
instead of:disable
- Condition should be
:disbale="item.status === 'active'"
instead of:disbale="item.status='active'"
Working Demo :
const app = new Vue({
el: '#app',
data() {
return {
data: [{
selected: true,
status: 'active'
}, {
selected: false,
status: 'inActive'
}, {
selected: true,
status: 'active'
}]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(item, index) in data" :key="index">
<div v-if="item">
<div >
<input type="checkbox" v-model="item.selected" :disabled="item.status === 'active'"/>
</div>
</div>
</div>
</div>