Vue3中的select 的option是多余的？

最新推荐文章于 2024-08-11 02:01:29 发布

li_rt4

最新推荐文章于 2024-08-11 02:01:29 发布

阅读量369

点赞数 6

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/li_rt4/article/details/136283548

版权

文章讲述了在Vue3中使用v-model绑定下拉框时遇到的默认选中问题，以及如何正确设置option.key以避免错误。同时，作者还讨论了如何设置value和text以显示选中的城市名，如上海而非value形式。

摘要由CSDN通过智能技术生成

背景：

通过Vue3中填充一个下拉框，在打开页面时要指定默认选中，并在选项改变时把下拉框的选中值显示出来

问题：

填充通常的作法是设置 <option v-for="option in cities" :value="option.value" >，但这样会报错，大意是迭代有错误，改为 <option v-for="option in cities" :key="option.value" >就可以了。据说这个key只是推荐使用，不知为什么变成必须要有的了，当然要再加上:option=“option.value”也不报错，但这不是画蛇添足吗？

另外一个显示的选中值的问题：

网上查到的

created(){

this.selectedCity=this.cities[1].value;

}

一般来说通过设置value来改变选中值是正确的，但我发现这样显示出来的是：选择的是Shanghai，而不是”上海“，

改成this.selectedCity=this.cities[1].text，居然可以了，就是通过设置显示值，下拉框也能识别！

相关代码如下：

<script>
export default{
    data(){
        return {           
            selectedCity: '',
            cities:[
               
                {text: "青岛", value: 'Qingdao'},
                {text: "上海", value: "Shanghai"},
                {text: "北京", value: "Beijing"}
            ]
            
        }
    },
    
    created(){
        this.selectedCity=this.cities[1].text;
    }


}
</script>
<template>
    <div class=" container-fluid p-5 my-5">
        <div class="row">
        
        <div class=" col">
            <div class="card">
                <div class=" card-header">
                    表单绑定
                </div>
                <div class=" card-body">                    
                        
                     <div class="row">
                        <div class="col">
                            <select v-model="selectedCity" class=" form-control form-select">
                                <option  v-for="option in cities" :key="option.value"   >
                                    {{ option.text }}
                                </option>
                            </select>
                        </div>
                        <div class="col">
                            <span>选择的是{{ selectedCity }}</span>
                        </div>
                     </div>
                </div>               
            </div>
        </div>
    </div>
    </div>
    
</template>