我想為select選項元素設定默認選定值但無法獲得正確的結果
<template>
<select v-model="tutor_work.start_year">
<option>{{tutor_work.start_year}}</option>
<option v-for="year in years" :key="year" :value="year">{{ year }}</option>
</select>
<template/>
<script>
import axios from 'axios'
export default {
data() {
return {
tutor_work: {
organization: "",
start_year: "",
finish_year: "",
},
}
},
mounted() {
this.getUserData()
},
methods: {
async getUserData() {
await axios
.get('api/v1/user/tutor/work/')
.then(response =>{
this.tutor_work = response.data
})
.catch(error => {
console.log(error)
})
}
},
computed : {
years () {
const year = new Date().getFullYear()
return Array.from({length: year - 1980}, (value, index) => 1981 index)
}
}
}
</script>
代碼作業正常，但問題是選擇的值（即年份）在第一個原始資料上而不是在前一年之后，例如在選項中有年份并且start_year: 2019來自服務器并且它在第一個選項上，而不是在 2018 年之后。
uj5u.com熱心網友回復：
您可以系結:selected="tutor_work.start_year"：
new Vue({
el: "#demo",
data() {
return {
tutor_work: {
organization: "ff",
start_year: "2010",
finish_year: "2019",
},
}
},
computed : {
years () {
const year = new Date().getFullYear()
return Array.from({length: year - 1980}, (value, index) => 1981 index)
}
}
}
)<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<select v-model="tutor_work.start_year">
<option v-for="year in years" :key="year" :value="year" :selected="tutor_work.start_year">{{ year }}</option>
</select>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/403395.html
標籤：