How do i disable data from select option on vue-CodePudding

If the customer's status is dead, I want to disable the "healthy, little healthy and unhealthy" options. How should I write the checkHealth method?

<template v-for= "customer in customers">
  <select v-model="selected" @change="checkHealthy(customer.statu)">
    <option v-for="statu in status" :value="statu.id" >{{statu.name}}</option>
  </select>
</template>

<script>
export default {
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"},
    ]
  }
},
  methods:{
  checkHealthy(statu){
    
  }
}
}
</script>

CodePudding user response：

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>