VUE 单选下拉框Select中动态加载 默认选中第一个

时间:2022-10-11 06:03:35
<lable>分类情况</lable>
<select v-model="content.tid">
<option v-for="type in types" :value="type.id" :key="type.id">
{{type.name}}
</option>
</select>

  

 
总结的很到位

vue select下拉框绑定默认值:

首先option要加value值,以便v-model可以获取到对应选择的值

一、当没有绑定v-model,直接给对应的option加selected属性

二、当给select绑定了v-model的值的时候,要给v-model绑定的data值里写默认值

<template>
<div id ="learn-insert">
<h1>新增学习记录</h1>
<form v-if="!submmited">
<p>学习内容标题</p>
<input type="text" v-model="content.desc" required /> <p>学习详细内容</p>
<textarea type="text" v-model="content.details" required></textarea> <p>分类情况</p>
<select v-model="content.tid">
<option v-for="type in types" :value="type.id" :key="type.id">
{{type.name}}
</option> </select> <button v-on:click.prevent="post">添加学习内容</button>
</form> <div v-if="submmited" >
<h3>亲的学习内容已经发布成功</h3>
</div> <div id="preview">
<h3>内容概览</h3>
<p> 内容描述: {{content.desc}}</p>
<p> 内容详细描述: {{content.details}}</p>
<p> 内容详细描述: {{content.tid}}</p>
</div> </div>
</template> <script>
export default {
data() {
return {
content:{
id:"",
tid:"1",
uid:"",
datetime:"",
desc:"",
details:""
},
types:[],
submmited: false,
id:"1"
}
},
methods: {
post: function(){
this.$http.post('http://localhost:8085/content/add', this.content)
.then((data) =>{
console.log(data);
console.log(this.submmited);
this.submmited= true;
console.log(this.submmited);
}); } },
created(){
this.$http.get('http://localhost:8085/type/showall', true)
.then(function(response){
this.types=response.data;
console.log(this.types);
})
//,this.content.id=this.types[0].id }
} </script> <style scoped>
/*
#learn-insert *{
box-sizing: border-box;
} #learn-insert{
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
*/
label{
display: block;
margin: 20px 0 10px;
} input[type="text"],textarea,select{
display: block;
width: 100%;
padding: 8px;
} textarea{
height: 200px;
} #checkboxes label{
display: inline-block;
margin-top: 0;
} #checkboxes input{
display: inline-block;
margin-right: 10px;
} button{
display: block;
margin: 20px 0;
background: crimson;
color: #fff;
border: 0;
padding: 14px;
border-radius: 4px;
font-size: 18px;
cursor: pointer;
} #preview{
padding: 10px 20px;
border: 1px dotted #ccc;
margin: 30px 0;
} h3{
margin-top: 10px;
}
</style>