Vue 模型绑定为数字答案

【问题标题】：Vue model bind as a numberVue 模型绑定为数字
【发布时间】：2020-03-21 11:40:27
【问题描述】：

我在输入框上使用v-model，我想使用数字进行绑定，但它似乎不起作用。当我使用输入框时发生的事情是将项目保存为字符串，我知道这是因为当我执行myModel += 25 时，而不是100 转到125，它转到10025。

有没有办法让输入绑定为数字？

这是我的输入元素的样子：

    <input type="text" list="zoom-amount" v-model="project.zoom" />
    <datalist id="zoom-amount">
      <option>25</option>
      <option>50</option>
      <option>100</option>
      <option>150</option>
      <option>200</option>
    </datalist>

@Component
export default class WorkspaceStatusBar extends Vue {
  @Provide() public project: Project = this.activeProject

  public get activeProject() {
    return this.$store.getters['project/getActiveProject']
  }

  @Watch('activeProject')
  public onActiveProjectChanged(newProject: Project) {
    this.project = newProject
  }

}

【问题讨论】：

<input type="number" list="zoom-amount" v-model="project.zoom">?
使用type="number" 似乎在做同样的事情。
是的，刚刚测试过了。抱歉，应该在评论之前这样做
其实……我收回那句话……现在似乎可以工作了……
哇，真的吗？在我的测试中，它 a) 仍然是一个字符串，并且 b) 没有使用数据列表

标签： javascript typescript vue.js

【解决方案1】：

我不知道基于 Typescript / 类的 API（因此您可能需要稍微翻译一下），但一种方法是使用 computed property with both getter and setter，其中 setter 处理转换为一个数字

computed: {
  zoom: {
    get () {
      return this.project.zoom
    },
    set (zoom) {
      this.project.zoom = Number(zoom) // or parseInt(zoom, 10)
      // you can even commit / dispatch here, ie
      // this.$store.commit(...)
    }
  }
}

并将您的输入绑定到计算属性

<input v-model="zoom" list="zoom-amount">

这就是我认为类样式组件的样子。可能是错的，但你明白了

public get zoom (): string {
  return this.project.zoom.toString()
}

public set zoom (zoom: string) {
  this.project.zoom = Number(zoom)
}

【讨论】：

行得通！我修改了 typescript getter/setter。

【解决方案2】：

使用 v-model.number="project.zoom"

【讨论】：

这仍然允许我在字段中输入文本吗？我想将值作为数字绑定到属性，但在文本框中将值显示为百分比，因此属性将为100，文本框值为100%。用这种方法可以吗？