• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

182
Vistas
Configuración del valor dinámico predeterminado para la opción <select> en Vue js

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.

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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>

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda