Javascript - v-autocomplete not option selected

scorpions77
August 11, 2023
275 views
1 vote
2 Answers

I have one component in vue.js 2 and Vuetify that receive this 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 object array it´s used in :items to v-autocomplete property.

<v-autocomplete
                    v-model="anyo"
                    :items="listAnyos"

But my problem is that I need option selected v-model that contains: 2023 but it never selected this option.

This data it´s getted from graphql and it´s sending to other component. All data it´s in listAnyos but i need to do, that if query graphql it´s empty set anyo or current year in v-autocomplete

UPDATE

with response i change my code to try it:

<v-autocomplete
                    label="Select Year"
                    :items="filteredYears"
                    item-text="anio"
                    item-value="anio"
                    v-model="selectedYear"
                    ></v-autocomplete>

and in 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 change anonymous functions to values in variables and years in props. But not run, not show any errors but not run

Thanks for readme and sorry for my bad english.

Answers

import { computed } from "vue";

 const years = [
      { 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" },
    ];

    const currentYear = computed(() => new Date().getFullYear());
    const previousYear = computed(() => currentYear.value - 1);

    const filteredYears = computed(() =>
      years.filter((year) => year.anio === currentYear.value || year.anio === previousYear.value)
    );

   <div>
    <v-autocomplete
      label="Select Year"
      :items="filteredYears"
      item-text="anio"
      item-value="anio"
      v-model="selectedYear"
    ></v-autocomplete>
  </div>

Pls try it, hope it would work. Receive current year(2023) from Javascript.

As per my understanding you want to assign current year into the autocomplete and make that selected as a default if you are not getting a correct value of selectedYear from the backend or API call.

If Yes, Here is the working demo :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    listAnyos: [{
      "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"
    }],
    selectedYear: null,
  }),
  mounted() {
    const currYear = new Date().getFullYear(); 
    // Suppose you are getting value of anyo as null from the backend or API. Then you can just assign this 'currYear' to autocomplete and assign it as a selected value.
    if (!this.selectedYear) {
      this.listAnyos.unshift({
        "anio": currYear,
        "__typename": "Grupo"
      })
    }
    this.selectedYear = currYear
  }
})

<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
      <v-container fluid>
        <v-row
          align="center"
        >
          <v-col cols="12">
            <v-autocomplete
              v-model="selectedYear"
              :items="listAnyos"
              item-text="anio"
              item-value="anio"
            ></v-autocomplete>
          </v-col>
        </v-row>
      </v-container>
  </v-app>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Javascript – v-autocomplete not option selected

Answers