Convert select to vue-select with dynamic data

Question

(Laravel)I have:

import vSelect from 'vue-select'

Vue.component('v-select', vSelect);

  <select v-model="metaSeleccionada" class="form-control" style="height: 35.9px;" placeholder="Enter last name" id="selectPersona">
                              <option value="" disabled hidden>Seleccione la meta</option>
                              <option v-for="meta in metas" v-bind:value="meta.META_intId">
                                @{{ meta.META_varSubMeta }}: 
                                @{{ meta.META_varDenominacion }}
                              </option>
  </select>

I want to convert it to vue-select, I tried that in my blade:

  <v-select :options="metas" label="META_intId">
                          <template slot="option" slot-scope="option">
                              @{{ option.META_varSubMeta }} : @{{ option.META_varDenominacion}}
                          </template>
   </v-select>

i'm using Laravel and vue js [import vSelect from 'vue-select' Vue.component('v-select', vSelect);] @roliroli — Hans_Cusco, May 04 '18 at 19:52

Hans_Cusco · Accepted Answer · 2018-05-11T16:22:56.483

if anyone has the same problem, it was my solution:

<v-select  
                        label="META_varDenominacion" 
                        :options="metas"
                        v-model="metaSeleccionada"
                        placeholder="Seleccione una Meta"
                      >  
                         <template slot="option" slot-scope="option">
                            {{ option.META_varSubMeta }}: 
                            {{ option.META_varDenominacion }}
                         </template>
  </v-select>

the problem was that I was calling methods of v-select in the view, when I changed everything to a component of vuejs it works perfectly. Now i have:

import Vue from 'vue'
import vSelect from 'vue-select' Vue.component('v-select', vSelect);

and

Vue.component('contratos-component', require('./components/ContratoComponent.vue'));

This is where i'm calling v-select

Convert select to vue-select with dynamic data

1 Answers1