Vue.js 绑定模型将字符串转换为数字

Question

我有一个绑定这个的输入：

v-model: user.settings.filter(item => item.id === 1)[0].value

问题是值是一个字符串，它不起作用。如何转换为数字？

user 变量是来自 vuex 的计算属性:

    computed: {
        ...mapGetters({
            user: 'auth/user',
        }),
    },

如果这个变量在数据中，那会很容易...但是在计算中属性我不知道如何操作它。

Answer 1

在坏的地方修好它。这意味着如果你从某个地方的 api 得到 value，你必须修复 api 以便它 returns 一个数字而不是一个字符串。如果您从某处的应用程序获取它，则需要将其保存为数字而不是字符串。如果它是在 Vuex getter 中动态计算的，请使用 parseInt(..) (docs) or parseFloat(..) (docs) 将字符串中的任何内容解析为数字。请记住，如果字符串中有无意义的内容，则该属性中可能会出现 NaN。

Answer 2

我同意@Sumurai8，你不应该收到需要从前端改变的类型。虽然这里有一个关于如何做到这一点的例子，通过使用 .map(Number)

new Vue({
  el: "#app",
  data: {
   testNumber: undefined
  },
  computed: {
    getTestNumber: function() {
      return this.testNumber ? this.testNumber.split(',').map(Number) : null
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h2>String to number:</h2>
  <input type="text" v-model="testNumber">
  <p v-html="getTestNumber"></p>
</div>

这会将数字字符串转换为数字。一旦你添加一个字符，它将 return 与 NaN（非数字）

Vue.js 绑定模型将字符串转换为数字

Vue.js binding model convert string to number

type-conversion

model-binding

vue.js