Open jyotikalashetty opened 1 year ago
Add below code in tag
<div> <label class="typo__label">Custom option template</label> <multiselect v-model="value" placeholder="Fav No Man’s Sky path" label="title" track-by="title" :options="options" :option-height="104" :custom-label="customLabel" :show-labels="false"> <template slot="singleLabel" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"><span class="option__desc"><span class="option__title">{{ props.option.title }}</span></span></template> <template slot="option" slot-scope="props"><img class="option__image" :src="props.option.img" alt="No Man’s Sky"> <div class="option__desc"><span class="option__title">{{ props.option.title }}</span><span class="option__small">{{ props.option.desc }}</span></div> </template> </multiselect> <pre class="language-json"><code>{{ value }}</code></pre> </div>
Add below code in
import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data () { return { value: { title: 'Explorer', desc: 'Discovering new species!', img: 'static/posters/creatures.png' }, options: [ { title: 'Space Pirate', desc: 'More space battles!', img: 'static/posters/fleet.png' }, { title: 'Merchant', desc: 'PROFIT!', img: 'static/posters/trading_post.png' }, { title: 'Explorer', desc: 'Discovering new species!', img: 'static/posters/creatures.png' }, { title: 'Miner', desc: 'We need to go deeper!', img: 'static/posters/resource_lab.png' } ] } }, methods: { customLabel ({ title, desc }) { return `${title} – ${desc}` } } }
Snap for Expected result:
Option title and description displaying on same line
@JK-codinghub Please provide reproducible repo link.
Steps to reproduce
Add below code in tag
Add below code in
Expected behaviour
Snap for Expected result:![option](https://user-images.githubusercontent.com/76241595/212334016-19d3cb04-8d07-4253-bd7e-4a8e3757b4aa.png)
Actual behaviour
Option title and description displaying on same line