vue.js - 如何使用代码更改数字文本框值？

Question

我有一个数字文本框，如下所示：

<numeric-textbox id="value-field" :default-value="0.00" :min="0.00" :format="'n2'" :spinners="false" @change="amountChanged($event)" :disabled="amountDisabled" />

如何在代码中设置值？

我尝试过的事情：

1. $('#value-field').val(0.00);- 这暂时有效，但在获得焦点时会变回以前的值

2. 我尝试了一个模型，v-model="myValue"但更改代码中的值不会更新字段。

我不知道我需要做什么才能改变它！

Answer 1

您应该使用v-model指令速记或:value绑定和@input事件。（Vue 文档）

完整演示：https ://stackblitz.com/edit/gzbkbk-maqc4a?file=src/main.vue

---

• 与v-model：

<numerictextbox v-model="myValue" />

data() {
  return {
    myValue: 5
  };
},
methods: {
  updateMyValueProgrammatically() {
    this.myValue = 10;
  }
}

• :value和@input：_

<numerictextbox :value="myValue" @input="onInput" />

data() {
  return {
    myValue: 5
  };
},
methods: {
  onInput(e) {
    this.myValue = e.target.value;
  },
  updateMyValueProgrammatically() {
    this.myValue = 10;
  }
}