淄博圻谷网站建设制作,安丘做网站的,360官网入口,有偷菜餐厅城市建设的网站背景#xff1a;
通过Vue3中填充一个下拉框#xff0c;在打开页面时要指定默认选中#xff0c;并在选项改变时把下拉框的选中值显示出来
问题#xff1a;
填充通常的作法是设置 option v-foroption in cities :valueoption.value
通过Vue3中填充一个下拉框在打开页面时要指定默认选中并在选项改变时把下拉框的选中值显示出来
问题
填充通常的作法是设置 option v-foroption in cities :valueoption.value 但这样会报错大意是迭代有错误改为 option v-foroption in cities :keyoption.value 就可以了。据说这个key只是推荐使用不知为什么变成必须要有的了当然要再加上:option“option.value”也不报错但这不是画蛇添足吗
另外一个显示的选中值的问题 网上查到的 created(){ this.selectedCitythis.cities[1].value; }
一般来说通过设置value来改变选中值是正确的但我发现这样显示出来的是选择的是Shanghai而不是”上海“
改成this.selectedCitythis.cities[1].text居然可以了就是通过设置显示值下拉框也能识别
相关代码如下
script
export default{data(){return { selectedCity: ,cities:[{text: 青岛, value: Qingdao},{text: 上海, value: Shanghai},{text: 北京, value: Beijing}]}},created(){this.selectedCitythis.cities[1].text;}}
/script
templatediv class container-fluid p-5 my-5div classrowdiv class coldiv classcarddiv class card-header表单绑定/divdiv class card-body div classrowdiv classcolselect v-modelselectedCity class form-control form-selectoption v-foroption in cities :keyoption.value {{ option.text }}/option/select/divdiv classcolspan选择的是{{ selectedCity }}/span/div/div/div /div/div/div/div/template
