IconPicker with SmartSelect VUE

Questions
1

Hello, Im trying to make an icon picker from SmartSelect, but I can’t make the icons show up.

Here’s my code:

    <f7-list-item title="Ícono" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Buscar ícono...'}">
    <select name="icono" >
      <optgroup label='Comida Bebida'>	
        <option value='bacon'><font-awesome-icon icon='bacon' slot='media'/>Bacon</option>
        <option value='wine-bottle'><font-awesome-icon icon='wine-bottle'/>Botella</option>
        <option value='coffee'><font-awesome-icon icon='coffee'/>Cafe</option>
        <option value='beer'><font-awesome-icon icon='beer'/>Cerveza</option>
        <option value='glass-cheers'><font-awesome-icon icon='glass-cheers'/>Copas</option>
        <option value='utensils'><font-awesome-icon icon='utensils'/>Cubiertos</option>
        <option value='birthday-cake'><font-awesome-icon icon='birthday-cake'/>Cumpleaños</option>
        <option value='cookie'><font-awesome-icon icon='cookie'/>Galletita</option>
        <option value='cookie-bite'><font-awesome-icon icon='cookie-bite'/>Galletita</option>
        <option value='hamburger'><font-awesome-icon icon='hamburger'/>Hamburguesa</option>
        <option value='ice-cream'><font-awesome-icon icon='ice-cream'/>Helado</option>
        <option value='pepper-hot'><font-awesome-icon icon='pepper-hot'/>Jalapeño</option>
        <option value='blender'><font-awesome-icon icon='blender'/>Licuadora</option>
        <option value='lemon'><font-awesome-icon icon='lemon'/>Limon</option>
        <option value='apple-alt'><font-awesome-icon icon='apple-alt'/>Manzana</option>
        <option value='glass-martini-alt'><font-awesome-icon icon='glass-martini-alt'/>Martini</option>
        <option value='glass'><font-awesome-icon icon='glass'/>Martini</option>
        <option value='hotdog'><font-awesome-icon icon='hotdog'/>Pancho</option>
        <option value='drumstick-bite'><font-awesome-icon icon='drumstick-bite'/>Pata Pollo</option>
        <option value='pizza-slice'><font-awesome-icon icon='pizza-slice'/>Pizza</option>
        <option value='mug-hot'><font-awesome-icon icon='mug-hot'/>Taza</option>
        <option value='cheese'><font-awesome-icon icon='cheese'/>Torta</option>
        <option value='cocktail'><font-awesome-icon icon='cocktail'/>Trago</option>
        <option value='wine-glass-alt'><font-awesome-icon icon='wine-glass-alt'/>Vaso Vino</option>
        <option value='wine-glass'><font-awesome-icon icon='wine-glass'/>Vaso Vino 2</option>
        <option value='glass-whiskey'><font-awesome-icon icon='glass-whiskey'/>Vaso Whiskey</option>
        <option value='carrot'><font-awesome-icon icon='carrot'/>Zanahoria</option>
      </optgroup>	
      <optgroup label='Edificios'>	
        <option value='archway'><font-awesome-icon icon='archway'/>Arco</option>
        <option value='torii-gate'><font-awesome-icon icon='torii-gate'/>Arco Chino</option>
        <option value='landmark'><font-awesome-icon icon='landmark'/>Banco</option>
        <option value='home'><font-awesome-icon icon='home'/>Casa</option>
        <option value='fort-awesome'><font-awesome-icon icon='fort-awesome'/>Castillo</option>
        <option value='gopuram'><font-awesome-icon icon='gopuram'/>Castillo2</option>
        <option value='city'><font-awesome-icon icon='city'/>Ciudad</option>
        <option value='clinic-medical'><font-awesome-icon icon='clinic-medical'/>Consultorio</option>
        <option value='building'><font-awesome-icon icon='building'/>Edificio</option>
        <option value='school'><font-awesome-icon icon='school'/>Escuela</option>
        <option value='warehouse'><font-awesome-icon icon='warehouse'/>Galpon</option>
        <option value='hospital-alt'><font-awesome-icon icon='hospital-alt'/>Hospital</option>
        <option value='hotel'><font-awesome-icon icon='hotel'/>Hotel</option>
        <option value='church'><font-awesome-icon icon='church'/>Iglesia</option>
        <option value='igloo'><font-awesome-icon icon='igloo'/>Iglu</option>
        <option value='industry'><font-awesome-icon icon='industry'/>Industria</option>
        <option value='monument'><font-awesome-icon icon='monument'/>Obelisco</option>
        <option value='swiming-pool'><font-awesome-icon icon='swiming-pool'/>Pileta</option>
        <option value='umbrella-beach'><font-awesome-icon icon='umbrella-beach'/>Playa</option>
        <option value='campground'><font-awesome-icon icon='campground'/>Tienda</option>
        <option value='store'><font-awesome-icon icon='store'/>Tienda</option>
        <option value='store-alt'><font-awesome-icon icon='store-alt'/>Tienda2</option>
        <option value='university'><font-awesome-icon icon='university'/>Universidad</option>
      </optgroup>	
      <optgroup label='Juegos'>	
        <option value='chess'><font-awesome-icon icon='chess'/>Ajedrez</option>
        <option value='bowling-ball'><font-awesome-icon icon='bowling-ball'/>Bowling</option>
        <option value='dice'><font-awesome-icon icon='dice'/>Dados</option>
        <option value='gamepad'><font-awesome-icon icon='gamepad'/>Joystick</option>
        <option value='basket-ball'><font-awesome-icon icon='basket-ball'/>Pelota Basquet</option>
        <option value='futbol'><font-awesome-icon icon='futbol'/>Pelota Futbol</option>
        <option value='voleyball-ball'><font-awesome-icon icon='voleyball-ball'/>Pelota Volley</option>
      </optgroup>	
    </select>

How can i make the icons show up in the smart select and in the selected after?

2

te dejo un ejemplo;
jsfiddle

no llegue a hacer la parte del icono en el selected after. pero basicamente on Close, toma el item seleccioado, aplicalo a selectedIcon y deberia funcionar.
saludos.

1 Like
3

Hola, me re sirvio, ahora voy a probar lo de selected icon!

Gracias!

For those who use fontawesome-vue you have to add this import:

import { dom } from '@fortawesome/fontawesome-svg-core'
dom.watch()
4

@pvtallulah ya lo solucione pero no encontre la propiedad selectedIcon

Lo hice de esta forma:

<f7-list-item title="Ícono" smart-select :smart-select-params="{openIn: 'popup', searchbar: true, searchbarPlaceholder: 'Buscar ícono...'}">
<font-awesome-icon :icon="icono" slot='media' size="2x"/>
    <select name="icono" v-model="icono">
5

Q versión de f7 usas? Xq vmodel no está disponible en v5

6

La baje hace 2 meses mas o menos, uso el CLI ahora me fijo como verifico la version dice 3.1.0 del CLI

7

claro, estas usando la version 5 de f7. v-model no deberia funcionar. te funciona a vos? que raro

8

Si porque lo uso sobre el Select, no sobre el smart select, los inputs por ejemplo tengo que hacerlos asi:

<f7-list-input :value='nombre' @input='nombre = $event.target.value' label="Nombre" type="text" placeholder="Nombre" clear-button><font-awesome-icon icon="font" slot='media' size="2x"/></f7-list-input>
1 Like