问题描述

在vue中使用原生的select下拉框的时候，绑定数据内容但是发现其中默认显示第一条的并不显示
需求实现效果

实际实现效果

循环出select内的数据以后，发现原本默认显示第一条的select框变成了空白，要选择后才有显示。原始代码如下：

 <select name="" id="" v-model="returnformValue" v-cloak>
             <option :value="returnItem.label"
                         v-for="returnItem in returnform"
                                 :key="returnItem.value" v-cloak>
                            {{returnItem.label}}
             </option>
 </select>
 <script>
	export default {
	  data() {
	    return {
		 returnformValue:"",
	     returnform: [
	                {
	                    value: '0',
	                    label: 'Different item'
	                },
	                {
	                    value: "1",
	                    label: "Defective item"
	                },
	                {
	                    value: "2",
	                    label: "Order not received"
	                },
	           ]
	    }
  }

</script>

原因分析

vue中的select通过v-model可以获取到选中的值，如果option中存在label属性，优先获取label值即代码中的内容，如果不存在，则获取option的文本内容，也就是上面代码中的空内容。
造成默认不显示的原因是v-model获取的token在option的label中匹配不到。因此将v-model中的值直接改成你想要默认渲染的内容

<select name="" id="" v-model="returnformValue" v-cloak>
             <option :value="returnItem.label"
                         v-for="returnItem in returnform"
                                 :key="returnItem.value" v-cloak>
                            {{returnItem.label}}
             </option>
 </select>
 <script>
	export default {
	  data() {
	    return {
		 returnformValue:"Different item",
	     returnform: [
	                {
	                    value: '0',
	                    label: 'Different item'
	                },
	                {
	                    value: "1",
	                    label: "Defective item"
	                },
	                {
	                    value: "2",
	                    label: "Order not received"
	                },
	           ]
	    }
  }

</script>

仅有对象的内容请见，该博主的分析