vue js validation issue with checkbox

Question

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 disable and not clickable?

<div v-for="(item, index) in data" :key="index">
   <div class="row items-center q-pa-sm" v-if="item">
       <div class="col-1">
            <q-checkbox dense v-model="item.selected"/>
       </div>
 </div>
</div>

Answer 1

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 class="row items-center q-pa-sm" v-if="item">
      <div class="col-1">
        <input type="checkbox" v-model="item.selected" :disabled="item.status === 'active'"/>
      </div>
    </div>
  </div>
</div>