[Vuejs]-Vue js validation issue with checkbox

by

0👍

✅

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>

Leave a comment