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>

选择省市有1个选择。它按级别区分。我想添加条件

如果level = province，它将运行v-model =“selectedProvince”

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

我尝试过上面的代码，但从写作开始，似乎仍然是错误的

我该如何正确地做到这一点？

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

如何在v-model选择中添加条件？ vue.js 2

1 个答案: