如何在 v-model select 上添加条件？ vue.js 2

Question

我的vue组件是这样的：

<template>
    <select class="form-control" v-model="selectedProvince"="level === 'province'"  v-model="selectedProvince"="level === 'city'">
        <option value="">Choose</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>
<script>
    export default {
        props: ['level'],
        data() {
            return {
                selectedProvince: '',
                selectedCity: '',
            };
        },
        ...
    };
</script>

Select个省市有1个select。它是按级别区分的。我要加条件

如果level=省份，会运行v-model="selectedProvince"

如果 level = city，它将运行 v-model = "selectedCity"

上面的代码我试过了，但是从写的来看，好像还是不对

我怎样才能正确地做到这一点？

Answer 1

抛开您在同一个 select 中拥有两种不同类型的信息这似乎很奇怪的问题，您可能希望使用计算值而不是您正在尝试的值来派生您的值。

data(){
    return {
        selectedOption: null,
        level: "province"
    }
},
computed:{
    selectedProvice(){
        if (this.level === "province")
            return this.selectedOption
        else
            return null
    },
    selectedCity(){
        if (this.level === "city"
            return this.selectedOption
        else
            return null
    }
}

然后为您的模型使用 selectedOption。

<select class="form-control" v-model="selectedOption">

如何在 v-model select 上添加条件？ vue.js 2

How can I add condition on v-model select ? vue.js 2

vue.js

vue-component

vuejs2