Quería establecer el valor seleccionado predeterminado para el elemento de opción select
pero no puedo obtener el 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 el primer bruto, no después del año anterior, por ejemplo, en la opción hay años y start_year: 2019
es del servidor y está en la primera opción, no viene después de 2018.
Puede enlazar :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>