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

【问题标题】：How can I add condition on v-model select ? vue.js 2如何在 v-model select 上添加条件？ Vue.js 2
【发布时间】：2017-05-23 16:42:38
【问题描述】：

我的 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>

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

如果 level = 省，它将运行 v-model = "selectedProvince"

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

我按照上面的代码试过了，但是从写法看来还是错了

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

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案1】：

撇开在同一个选择中有两种不同类型的信息似乎很奇怪的问题不谈，您可能希望使用计算值而不是您正在尝试的值来导出您的值。

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">

【讨论】：