Как заставить Vuetify v-combobox возвращать массив чисел вместо массива строк - PullRequest
Новая
       14

Как заставить Vuetify v-combobox возвращать массив чисел вместо массива строк

0 голосов
/ 20 сентября 2018

Я использую v-combobox с несколькими вариантами чисел в нем.V-модель - это массив целых чисел, но когда у меня были (целочисленные) значения, вместо этого были строки: 

<template>
<transition name="scale-transition">
 <v-card>
<v-card-title>
    TEST
  </v-card-title>
<v-combobox v-model="ports" 
                        label="Port(s)" 
                        :items="ports" 
                        type="number"
                        multiple 
                        required
                        hint = "Please fill this with ports numbers."/>                  

<v-btn round @click.native.stop="log()" color="primary" dark class="mb-2">Click !</v-btn>
</v-card>
</panel>
</transition>
</template>

<script>

    export default {
       data () {
          return {
               ports: [80]
          }
     },


 methods: {
  log() {
      console.log('Ports=', this.ports)
    }
  }

}   

</script>

 <style>
 </style>

Тип = число не позволяет пользователю правильно вводить не числовые значения, кроме vПеременная -model (ports) заполняется строками для каждого нового значения.

Когда у меня было 345 и 56 для v-combobox, метод журнала затем показывает: 

Ports= [80, "345", "56"]

со строками для добавленных значений вместо: 

Ports=[80,345,56]

только с цифрами, как я бы предпочел!

Вы знаете способ заставить массив результатов содержать только цифры?

Заранее спасибо ...

1 Ответ

0 голосов
/ 10 декабря 2018

Я сделал пользовательскую функцию проверки, основанную на свойстве правила комбобокса , которая обеспечивает проверку формы, поэтому я не использовал параметр type = number: 

<v-form ref="form" v-model="valid" lazy-validation>
  <v-layout wrap>
    <v-flex xs12>
      <v-combobox 
        v-model="phones"
        :rules="intRule"
        deletable-chips 
        :items="phones" 
        hide-selected
        label="Phones"
        multiple
        persistent-hint
        small-chips>
      </v-combobox>
    </v-flex>
  </v-layout>
 </v-form>
<script>
export default {
data: () => ({
phones:[],
valid: false,
intRule: [function(v){
  for (var i = 0; i < v.length; i++) {
  if(/[^0-9]/g.test(v[i])){
      return "Insert numbers only";
    }
    v[i] = parseInt(v[i]);
  }
  return true;
  }]})
}
</script>
...