Optimization on vue templates

there are still a lot of sensory codes in switch. Is there a more concise way?

<div
    class="title"
  >
    {{ orderStateValue }}
</div>


init() {
    switch (res.OrderInfo.OrderState) {
      case "Wait":
        this.orderStateValue = "";
        break;
      case "Sent":
        this.orderStateValue = "";
        break;
      case "Cancel":
        this.orderStateValue = "";
        break;
      case "Fail":
        this.orderStateValue = "";
        break;
      default:
        break;
    }
}
Apr.13,2022

<div class="title">
    {{ getState(state)}}
</div>
data(){
    return {
        state: 'Wait'
    }
}
methods: {
    getState(stateName){
        const states = {
            Wait: '',
            Sent: '',
            Cancel: '',
            Fail: ''
        }
        return states[stateName] || ''
    }
}

write a method

  

state as key,statevalue as value, so define an object object, and use state to take the value in object

.
Menu