How do I disable Select components in iview?

There are two radio components and two select components on the

page, which are set to activate the specified select through radio and disable the other one. How should this be achieved?

on the tutorial, you can only configure the disabled property of select to control whether select is disabled. An error will be thrown when setting via setOilOrGunNumber. The screenshot is as follows:

related codes

setOilOrGunNumber(val) {
    if(val === "0") {
        this.$refs.OilType.disabled = true;
        this.$refs.GunNumber.disabled = false;
    } else if (val === "1") {
        this.$refs.OilType.disabled = false;
        this.$refs.GunNumber.disabled = true;
    } else {
        console.log("")
    }
}


<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div style="float:right"><span>*</span>:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="OilType">
            <OptionGroup label="">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>
<!--  -->
<Row type="flex" :gutter="16" justify="start">
    <i-col span="5">
        <div><span>*</span>:</div>
    </i-col>
    <i-col span="19">
        <Select clearable v-model="voiltypeid" ref="GunNumber">
            <OptionGroup label="">
                <Option  v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option>
            </OptionGroup>
        </Select>
    </i-col>
</Row>

how should such a requirement be realized?

<Row type="flex" :gutter="16" justify="start"> <i-col span="5"> <div style="float:right"><span>*</span>:</div> </i-col> <i-col span="19"> <Select clearable v-model="voiltypeid" ref="OilType" :disabled="disabled"> <OptionGroup label=""> <Option v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option> </OptionGroup> </Select> </i-col> </Row>  <Row type="flex" :gutter="16" justify="start"> <i-col span="5"> <div><span>*</span>:</div> </i-col> <i-col span="19"> <Select clearable v-model="voiltypeid" ref="GunNumber" :disabled="disabled1"> <OptionGroup label=""> <Option v-for="item in oilsList1" :value="item.id" :key="item.id" >{{ item.oilname }}</Option> </OptionGroup> </Select> </i-col> </Row> setOilOrGunNumber(val) { if(val === '0') { this.disabled = true; this.disabled1 = false; } else if (val === '1') { this.disabled = false; this.disabled1 = true; } else { console.log('') } }