-2

Pessoal estou precisando retornar em um v-select multiple apenas os valores selecionados em um array, estou tentando há algum tempo sem sucesso, ele retorna o objeto completo e como estou usando em um form venho tendo problemas.

    new Vue({
              el:"#app",
data : {
                criterios : '',
                criterios_list: [
                {'value' : 'S_cheque', 'label' : 'S/cheque'},
                {'value' : 'S_cartao', 'label' : 'S/cartão Faturado'},
                {'value' : 'Somente_cartao', 'label' : 'Somente cartão Faturado'}]
}
});

<v-select multiple v-model="criterios" :options="criterios_list"></v-select>
{{criterios}}
3
  • Esse componente v-select é de que biblioteca?
    – Sergio
    25/09/2018 às 14:28
  • @Sergio Pela sintaxe é do Vuetify. 25/09/2018 às 15:49
  • @guastallaigor pois também achei mas queria ter a certeza antes de responder :)
    – Sergio
    26/09/2018 às 11:17

4 Respostas 4

-1

Não sei se é a melhor forma, mas consegui resolver esse problema transformando o elemento em um array simples:

    new Vue({
              el:"#app",
data : {
                criterios : '',
                criterios_list: ['S/cheque','S/cartão Faturado']
}
});

<v-select multiple v-model="criterios" :options="criterios_list"></v-select>
{{criterios}}
1
  • Oi Victor, viste a minha pergunta nos comentários?
    – Sergio
    26/09/2018 às 13:21
-1

Segundo a documentação do Vuetify, você pode usar as propriedades item-text e item-value com as chaves do objeto para personalizar isso.

Segue seu exemplo modificado.

new Vue({
  el:"#app",
  data: {
    criterios : '',
    criterios_list: [
      {'value' : 'S_cheque', 'label' : 'S/cheque'},
      {'value' : 'S_cartao', 'label' : 'S/cartão Faturado'},
      {'value' : 'Somente_cartao', 'label' : 'Somente cartão Faturado'}]
  }
});
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-select multiple v-model="criterios"
              :items="criterios_list" 
              item-text="label"
              item-value="value"></v-select>
    {{criterios}}
  </v-app>

</div>

-1

<v-select multiple 
    v-model="criterios" 
    :options="criterios_list"
    label="label"
    value="value">
</v-select>

1
  • Por mais que a resposta venha a ser útil, seria interessante explicar o que estás a fazer, assim, facilita o entendimento do autor da pergunta e de futuras consultas.
    – Jorge.M
    13/12/2018 às 18:03
-1

Você pode usar o reduce

<v-select multiple v-model="criterios" :reduce="(x) => x.value" :options="criterios_list"/>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .