I need to set a default selected value for the select option element, but I am facing difficulty in achieving the desired result.
<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>
The functionality of the code is correct, but the issue lies with the positioning of the selected value. The selected year (e.g., start_year: 2019) is displayed as the first option instead of being placed after the previous year, such as 2018.