如何使用代码更改数字文本框值？

Question

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

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

如何在代码中设置值？

我尝试过的事情：

$('#value-field').val(0.00); - 这暂时有效，但在获得焦点时变回以前的值
我尝试了类似 v-model="myValue" 的模型，但更改代码中的值不会更新该字段。

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

Answer 1

您应该使用 v-model 指令 shorthand 或 :value 绑定和 @input 事件。 (vue docs)

完整演示：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;
  }
}

如何使用代码更改数字文本框值？

How can I change a numeric textbox value using code?

kendo-ui

kendonumerictextbox

vue.js