I am trying to get location name with location id using vue js

Question

When I select to location I want also to get the location name but unfortunatly getting location name wrong with location id please help me how can i solved thank u.

locationList.vue

<template>
    <div class="q-gutter-md q-pa-sm col-md-3">
        <q-select
            v-model="location_id"
            filled
            label="Locations"
            :options="api.locations"
            bg-color="white"
            name="location_id"
            dense
            emit-value
            map-options
            option-label="name"
            option-value="id"
            @update:model-value="addLocation"
        />
    </div>
</template>

script

methods: {
        getLocations () {
            axios.get(process.env.API_URL + '/lookups/locations')
                .then(({ data: { items } }) => {
                    this.api.locations = items
                })
                .catch((error) => {
                    console.log(error)
                })
        },
        addLocation () {
            let locationName = null
            if (this.location_id != null) {
                locationName = this.api.locations.name
            }
            store.dispatch('location/storeLocation', {
                location_id: this.location_id,
                locations: locationName
            })
        }
    }

I think `q-select` component is saving an object with value and label inside `location_id`. Is it `Quasar`? — Álvaro, Feb 10 '23 at 08:10
According to docs you have two ways to use `q-select and v-model binding`. I can't see `location_id` declaration but I think it is an `array of objects`, so maybe `location_id` have an object with the selected item. https://quasar.dev/vue-components/select#example--object-options EDIT: **I haven't used Quasar`** — Álvaro, Feb 10 '23 at 08:19

Multi · Accepted Answer · 2023-02-10T11:00:50.070

assuming that api.locations is an array of objects you're not searching for the location name in addLocation. also are you sure that location_id is being set? if it is not you're just dispatching a store event with a null locationName

something like this would work better for you

addLocation () {
    let locationName = null
    if (this.location_id) {
        locationName = this.api.locations.find(item => item.id === this.location_id).name;
    }
    if(locationName) {
        store.dispatch('location/storeLocation', {
            location_id: this.location_id,
            locations: locationName
        })
    }
}

more information on searching arrays from this answer

I am trying to get location name with location id using vue js

1 Answers1