Topic: Display selected value in dropdown
jay2jam pro asked 5 years ago
Hello, how can i display the selected value of a dropdown.
Rgds Stefan
imyke free answered 5 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>
jay2jam pro answered 5 years ago
Hello and sorry for my late response.
Yes it is working, thx so much :-)
Magdalena Dembna staff answered 5 years ago
Hi, the code shown above should work fine. Thank you @ for your solution. Kind regards,Magdalena
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: 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