[Vuejs]-How do i disable data from select option on vue

1๐Ÿ‘

โœ…

If I understood you correctly, take a look at following snippet:

new Vue({
  el: '#demo',
  data(){
    return{
      status:[
          {id:1,name:'healthy'},
          {id:2,name:'little healthy'},
          {id:3,name:'unhealthy'},
          {id:4,name:'unknown'},
      ],
      selected:[],
      customers:[
        {name:'John', statu: "healthy"},
        {name:'Adam', statu: "unhealthy"},
        {name:'Cristiano', statu: "dead"},
        {name:'Alberto', statu: "little healthy"},
        {name:'Kevin', statu: "healthy"},
      ]
    }
  },
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <template v-for= "customer in customers">
    {{ customer.name }}
    <select v-model="customer.statu">
      <option v-for="statu in status"
              :value="statu.name" 
              :disabled="customer.statu === 'dead' && statu.name !== 'unknown'">
        {{statu.name}}
      </option>
    </select>
  </template>
</div>

Leave a comment