javascript - Vue 模型绑定(bind)为数字

Question

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

是否可以将输入绑定(bind)为数字？

这就是我的输入元素的样子:

    <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
  }

}

Answer 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(...)
    }
  }
}

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

<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)
}