Display selected value in dropdown


Topic: Display selected value in dropdown

jay2jam pro asked 3 years ago

Hello, how can i display the selected value of a dropdown.

Rgds Stefan


imyke answered 3 years ago

Hello @jay2jam. You can use your code to achieve that. Try this, let me know if it works.

<template>
    <div>
        <mdb-dropdown>
            <mdb-dropdown-toggle slot="toggle" size="lg" outline="primary" darkWaves>
                {{subjects[currentIndex]}}
            </mdb-dropdown-toggle>
            <mdb-dropdown-menu color="primary">
                <mdb-dropdown-item v-for="(sub, i) in subjects" :key="i" @click.native="pickSubject(i)" :active="i ===
            currentIndex">{{sub}}
                </mdb-dropdown-item>
            </mdb-dropdown-menu>
        </mdb-dropdown>
    </div>
</template>

<script>
    import {
        mdbDropdown,
        mdbDropdownItem,
        mdbDropdownMenu,
        mdbDropdownToggle
    } from 'mdbvue';

    export default {
        name: 'App',
        components: {
            mdbDropdown,
            mdbDropdownItem,
            mdbDropdownMenu,
            mdbDropdownToggle
        },
        data() {
            return {
                currentIndex: 0,
                subjects: ['Science', 'History', 'English']
            };
        },
        methods: {
            pickSubject(i) {
                this.currentIndex = i;
            }
        }
    };
</script>

Magdalena Dembna staff premium answered 3 years ago

Hi, the code shown above should work fine. Thank you @ for your solution. Kind regards,Magdalena


imyke commented 3 years ago

Sure thing. I like the community.


jay2jam pro answered 3 years ago

Hello and sorry for my late response.

Yes it is working, thx so much :-)


Magdalena Dembna staff premium commented 3 years ago

I'm glad to hear that. Good luck!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.2.0
  • Device: MAC
  • Browser: CHROME
  • OS: Moave
  • Provided sample code: No
  • Provided link: No