b-输入模型具有字符串类型的值答案

【问题标题】：b-input model has value of type stringb-输入模型具有字符串类型的值
【发布时间】：2020-02-02 20:51:28
【问题描述】：

我正在尝试创建一个带有数字字段的表单。

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

在我的数据中，我有一个简单的数字变量。

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

但是，当我跟踪 testNumber 时，它是一个字符串

{{ typeof testNumber }}  // String

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

~~您可以为 v-model 添加修饰符。~~

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

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

更新

不要使用 v-model.number 这个作为 bootstrap-vue 建议不要这样做：

v-model 修饰符 .number 和 .trim 可能导致意外的光标跳转当用户输入时（这是自定义 v-model 的 Vue 问题成分）。避免使用这些修饰符。

但使用 b-form-input 建议：

为了解决这个问题，<b-form-input> 和 <b-form-textarea> 有两个模拟原生 Vue v-model 的布尔属性 trim 和 number 分别修饰 .trim 和 .number。

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

【讨论】：

好方法！ :)
由于 number 和 trim 属性是布尔值（默认 false 不存在），您可以将上面的内容简化为 <b-form-input v-model="testNumber" number />。布尔属性的存在将使其成为true

【解决方案2】：

type=number 默认返回值类型为string。你可以在这里看到HTML input elements are documented to return string representing a number

要更改模型值的这种行为，您需要在输入更改时转换您的值。像下面的例子

请在下面的代码 sn -p ：

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>

【讨论】：

【解决方案3】：

<template>
  <b-container fluid>
    <b-row class="my-1" v-for="type in types" :key="type">
      <b-col sm="3">
        <label :for="`type-${type}`">Type <code>{{ type }}</code>:</label>
      </b-col>
      <b-col sm="9">
        <b-form-input :id="`type-${type}`" :type="type"></b-form-input>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        types: [
          'number'
        ]
      }
    }
  }
</script>

【讨论】：