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

<lable>分类情况</lable>
<select v-model="content.tid">
<option v-for="type in types" :value="type.id" :key="type.id">
{{type.name}}
</option> 
</select>

　　

 

https://www.cnblogs.com/beileixinqing/p/8021794.html 

总结的很到位

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>