Getting from DB returns [object Object] instead of value in Vue JS

Question

I'm creating a form using Vuetify with a dropdown option, however I want to get the dropdown choices from a table in my DB instead of hardcoding the options in.

It seems to be working, meaning that every new entry into the DB table increases the # of options I have in the dropdown. However, all it displays is [object Object]. How can I actually get it to display the actual value?

The dropdown component inside the template tag:

<v-card>
    <v-container>
        <v-col class="d-flex" cols="12">
            <v-select
            :items="allDropdownTypes"
            label="Project Type"
            >
            </v-select>
        </v-col>
    </v-container> 
</v-card>

The prop:

    props: {
        allDropdownTypes: Array
    },

My blade template:

<div>
    <project-form-v2 
    :all-dropdown-types="{{ $allDropdownTypes }}"
    >
    </project-form>
</div>

Does this answer your question? How do you display a name in v-select for a vue-dropdown? — Tomáš Filip
– Tomáš Filip, Commented Feb 5, 2020 at 11:50
[object Object] is simply the default return value when converting an object to a string. You can see the the content of your object when converting to string by using JSON. stringify(). For this purpose, kindly read up here — FirstIndex
– FirstIndex, Commented Feb 5, 2020 at 15:26

Dhia Djobbi · Accepted Answer · 2022-09-18 12:08:27Z

1

This fixed it:

<v-card>
    <v-container>
        <v-select
        :items="allDropdownTypes.map(a => a.value)"
        label="Project Type"
        >
        </v-select>
    </v-container>
</v-card>

edited Sep 18, 2022 at 12:08

Dhia Djobbi

1,2922 gold badges21 silver badges38 bronze badges

answered Feb 6, 2020 at 22:04

Beginner_Hello

3691 gold badge7 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Getting from DB returns [object Object] instead of value in Vue JS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related