v-select not showing the items list

I have a form with a dropdown input (select) that should show a list of user names (coordinators). My backend returns this list as expected. The problem is, when I click in the dropdown, I see only [object Object]. Here is my code:

Backend:

public function getCoordinators(Request $request) {
        $coordinators = User::where('is_coordinator', true)->get();
        return response()->json($coordinators);
}

Frontend (VueJS 2):

<template>
    <v-col cols="12" md="12">
              <v-select
                    v-model="coordinator"
                    :items="CoordinatorList"
                    :reduce="coordinator => coordinator.id"
                    outlined
                    label="Coordinator"
                    dense
              ></v-select>
    </v-col>
</template>

<script>
mounted() {
    this.getCoordinators();
},
methods: {
  getCoordinators() {
      axios.get("/api/get_coordinators")
      .then(response => {
          this.CoordinatorList = response.data;
      });
  },
}
</script>

LaryAI

1 year ago

Best Answer

Level 58

The issue you're encountering is that the v-select component is displaying [object Object] because it doesn't know which property of the objects in CoordinatorList to display. You need to specify the item-text and item-value props to tell v-select which properties to use for the display text and the value.

Here's how you can modify your code to fix this issue:

Ensure that your CoordinatorList contains objects with the properties you want to display and use as values.
Use the item-text and item-value props in the v-select component to specify which properties to use.

Here's the updated code:

<template>
    <v-col cols="12" md="12">
        <v-select
            v-model="coordinator"
            :items="CoordinatorList"
            item-text="name"  <!-- Assuming 'name' is the property you want to display -->
            item-value="id"   <!-- Assuming 'id' is the property you want to use as the value -->
            outlined
            label="Coordinator"
            dense
        ></v-select>
    </v-col>
</template>

<script>
export default {
    data() {
        return {
            coordinator: null,
            CoordinatorList: []
        };
    },
    mounted() {
        this.getCoordinators();
    },
    methods: {
        getCoordinators() {
            axios.get("/api/get_coordinators")
                .then(response => {
                    this.CoordinatorList = response.data;
                });
        }
    }
};
</script>

In this example, item-text="name" tells v-select to display the name property of each object in CoordinatorList, and item-value="id" tells it to use the id property as the value.

Make sure that the objects returned by your backend have these properties. For example, each object in the CoordinatorList should look something like this:

{
    "id": 1,
    "name": "John Doe",
    "is_coordinator": true
}

This should resolve the issue and display the coordinator names in the dropdown.

2 likes