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>