Last active
December 16, 2019 05:31
-
-
Save dantrevino/06519731c592133305386839984cb25b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<q-select | |
borderless | |
v-model="model" | |
clearable | |
use-chips | |
use-input | |
fill-input | |
input-debounce="0" | |
:options="options" | |
@filter="filterFn" | |
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'" | |
hint="ex: user.id or user.id.blockstack" | |
placeholder="Search Blockstack names" | |
> | |
<template v-slot:before> | |
<q-icon name="search" /> | |
</template> | |
<template v-slot:no-option> | |
<q-item> | |
<q-item-section class="text-grey"> | |
No results | |
</q-item-section> | |
</q-item> | |
</template> | |
<template v-slot:selected-item="scope"> | |
<q-item> | |
<q-item-section avatar> | |
<q-avatar> | |
<img :src="scope.opt.icon" /> | |
</q-avatar> | |
</q-item-section> | |
<q-item-section> | |
<q-item-label>{{ scope.opt.label }}</q-item-label> | |
<q-item-label caption>{{ scope.opt.id }}</q-item-label> | |
</q-item-section> | |
</q-item> | |
</template> | |
<template v-slot:option="scope"> | |
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents"> | |
<q-item-section avatar> | |
<q-avatar size="lg"> | |
<img :src="scope.opt.icon" /> | |
</q-avatar> | |
</q-item-section> | |
<q-item-section> | |
<q-item-label v-html="scope.opt.label"></q-item-label> | |
</q-item-section> | |
</q-item> | |
</template> | |
</q-select> |
This worked:
<q-select
v-model="model"
clearable
:use-input="showInput"
hide-selection
fill-input
input-debounce="0"
:options="options"
@filter="filterFn"
:behavior="$q.platform.is.ios === true ? 'dialog' : 'menu'"
hint="ex: user.id or user.id.blockstack"
placeholder="Search Blockstack names"
@input="selectUser"
>
<template v-slot:before>
<q-icon name="search" />
</template>
<template v-slot:no-option>
<q-item>
<q-item-section class="text-grey">
No results
</q-item-section>
</q-item>
</template>
<template v-slot:selected-item="scope">
<q-item v-bind="scope.itemProps">
<q-item-section avatar>
<q-avatar>
<img :src="scope.opt.icon" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label>{{ scope.opt.label }}</q-item-label>
<q-item-label caption>{{ scope.opt.id }}</q-item-label>
</q-item-section>
</q-item>
</template>
<template v-slot:option="scope">
<q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
<q-item-section avatar>
<q-avatar size="lg">
<img :src="scope.opt.icon" />
</q-avatar>
</q-item-section>
<q-item-section>
<q-item-label v-html="scope.opt.label"></q-item-label>
</q-item-section>
</q-item>
</template>
</q-select>
Thanks @Cmacu!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Ok so maybe I'm just confused by what I'm seeing. I want this:
How do I replace the input? Is there a slot? or a reference to the input slot? ... From the examples I can only see a select slot.