Within my Vue.js 2 and Vuetify component, I am receiving the following data :
[ { "anio": 2022, "__typename": "Grupo" }, { "anio": 2020, "__typename": "Grupo" }, { "anio": 2018, "__typename": "Grupo" }, { "anio": 2017, "__typename": "Grupo" }, { "anio": 2016, "__typename": "Grupo" }, { "anio": 2015, "__typename": "Grupo" }, { "anio": 2014, "__typename": "Grupo" } ]
This array of objects is used in the :items property for the v-autocomplete.
<v-autocomplete
v-model="anyo"
:items="listAnyos"
However, my issue lies in the fact that I require the option with a selected v-model containing: 2023, but it does not select this option.
This data is retrieved from a graphql query and sent to another component. While all the data is present in listAnyos, if the graphql query is empty, I need to set the anyo as the current year in the v-autocomplete
UPDATE
In response, I adjusted my code as follows:
<v-autocomplete
label="Select Year"
:items="filteredYears"
item-text="anio"
item-value="anio"
v-model="selectedYear"
></v-autocomplete>
And in my methods:
calcularAnio() {
let anioActual = new Date().getFullYear();
let previousYear = anioActual.value - 1;
this.years.filter((year) => year.anio === anioActual.value || year.anio === previousYear.value)
}
I created a function and replaced anonymous functions with values stored in variables and years in props. However, the function does not run nor show any errors.
UPDATE 2
In my parent component:
<BarraBusqueda
:listAnyos="listaAnyos"
:listNumLiquidaciones="listaNumLiquidaciones"
:cargandoAnyos="cargandoAnyos"
:cargandoRegistros="cargandoRegistros"
:filtros="filtros"
:fechaGas="fechaGas"
@buscar="leerRegistros"
v-if="fechaGas"
/>
Upon API response, the previous array is returned. In my child component's mounted function, I included this code:
const currYear = new Date().getFullYear();
if (!this.selectedYear) {
this.listAnyos.unshift({
"anio": currYear,
"__typename": "Grupo"
})
this.items = this.listAnyos;
}
Now, my v-autocomplete looks like this:
<v-autocomplete
label="Ejercicio"
outline
v-model="selectedYear"
:items="items"
item-text="anio"
item-value="anio"
menu-props="offsetY"
:loading="cargandoAnyos"
:error-messages="anyoErrores"
:readonly="cargandoRegistros"
/>
Unfortunately, only the current year is displayed, not all the years, and the current year is not selected.
Thank you for reading and apologizes for any language barriers.