Модель b-input имеет значение типа string - PullRequest
Новая
       7

Модель b-input имеет значение типа string

1 голос
/ 04 октября 2019

Я пытаюсь создать форму с числовым полем. 

<b-input v-model="testNumber" type="number"/>

В моих данных у меня есть простое число var. 

data() {
  return {
    testNumber: 10,
  }
},

Однако, когда я отслеживаю testNumber этоэто строка 

{{ typeof testNumber }}  // String

Ответы [ 2 ]

3 голосов
/ 04 октября 2019

Вы можете добавить модификатор к v-модели.

(https://vuejs.org/v2/guide/forms.html#number) 

<b-form-input v-model.number="testNumber" />

ОБНОВЛЕНИЕ

Неиспользуйте v-model.number это как рекомендации по начальной загрузке, чтобы этого не делать:

модификаторы v-модели .number и .trim могут вызывать неожиданные скачки курсора, когда пользователь печатает (этоVue проблема с v-моделью на пользовательских компонентах.) Избегайте использования этих модификаторов.

Но использование в качестве b-form-input предполагает:

Чтобы обойти это, <b-form-input> и <b-form-textarea> имеют два логических реквизита trim и number, которые эмулируют собственные модификаторы Vue v-модели .trim и .number соответственно. 

<b-form-input v-model="testNumber" :number="true" />
0 голосов
/ 04 октября 2019

Тип возвращаемого значения type=number по умолчанию - string. вы можете видеть здесь Элементы ввода HTML задокументированы так, чтобы возвращать строку, представляющую число

Для изменения этого поведения значения модели вам необходимо преобразовать ваше значение при изменении ввода. Как приведенный ниже пример

Пожалуйста, ниже фрагмент кода: 

new Vue({
  el: '#app',
 
  data() {
    return {
      number:10,
      testNumber:100
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
 <input v-model="number" type="number"/>
 <p>type of number : {{typeof number}}</p>
 
 <input v-model="testNumber" type="number" @input="e => testNumber = +e.target.value" />
 <p>type of testNumber:  {{typeof testNumber}}</p>
</div>

Пример Bootstrap-vue

В этом примере вы можете использовать значение, получив .valueAsNumber и так же, как и выше, вы можете использовать +. Value . 

new Vue({
  el: '#app',
  methods: {
    updateVm(e) {
      this.testNumber1 = e.target.valueAsNumber;
    }
  },
  data() {
    return {
      number: null,
      testNumber: null,
      testNumber1: null
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- Add this to <head> -->

<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>

<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id="app" style="padding:10px;">
  <template>
  <b-container fluid>
    <b-row>
      <b-col><b-input  placeholder="First number"  v-model="number" type="number"/></b-col>
      <b-col>{{typeof number}}</b-col>
    </b-row>
    <b-row>
      <b-col><b-input  placeholder="2nd number"  v-model="testNumber" type="number" v-on:input="$v => testNumber = +$v"/></b-col>
      <b-col>{{typeof testNumber}}</b-col>
    </b-row>
     <b-row>
      <b-col><b-input  placeholder="3rd number"  v-model="testNumber1" type="number" v-on:input="updateVm(event)"/></b-col>
      <b-col>{{typeof testNumber1}}</b-col>
    </b-row>
  </b-container>
</template>
</div>
...