Configurando valor dinámico predeterminado para opción
Quería establecer un valor predeterminado seleccionado para el elemento de opción select
pero no puedo obtener un resultado adecuado.
<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>
El código funciona bien, pero el problema es que el valor seleccionado (que es el año) está en la primera fila y no después del año anterior, por ejemplo, en la opción hay años y start_year: 2019
viene del servidor y está en la primera opción, no después de 2018.
davy.ai
Para establecer el valor seleccionado por defecto para el elemento
select
, puedes usar el atributoselected
en la etiqueta option. Aquí tienes un fragmento de código actualizado:En este fragmento de código actualizado, hemos agregado el atributo
disabled
y un valor por defecto a la primera etiqueta option para evitar que se seleccione. También hemos agregado el atributoselected
a la etiqueta option que coincide con el valorstart_year
del servidor para establecerlo como la opción seleccionada por defecto.