Take the selected data in a v-select Multiple

Asked

Viewed 916 times

0

I am needing to return in a v-select Multiple only the values selected in an array, I am trying for some time without success, it returns the full object and as I am using in a form I have been having problems.

    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}}
vue.js

  • That component v-select is what library?

  • @Sergio By the syntax is Vuetify.

  • @guastallaigor because I thought so too but I wanted to be sure before answering :)

4 answers

0

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

  • However useful the answer may be, it would be interesting to explain what you are doing, thus facilitating the understanding of the author of the question and future consultations.

0

I don’t know if this is the best way, but I was able to solve this problem by transforming the element into a simple array:

    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}}

  • Hi Victor, you saw my question in the comments?

0

According to the documentation of Vuetify, you can use the properties item-text and item-value with the object keys to customize this.

Follow your modified example.

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>

0

You can use the reduce

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

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.