vue.js - 在Vue中重置文本输入的值

Question

我正在尝试按照此博客文章中所示的“键更改”说明构建重置按钮。这是代码：

<template>
  <view>
    <text-input
      :style="{ borderColor: 'gray', borderWidth: 1, backgroundColor: 'white', padding: 10, margin: 5, textAlign: 'right' }"
      v-model="testInput"
      keyboardType="decimal-pad"
      :componentKey="componentKey"
    />
    <button title="reset" :on-press="reset"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
      testInput: '14'
    }
  },
  methods: {
    reset() {
      this.componentKey += 1;
      console.log('parent ' + this.componentKey);
    }
  }
}
</script>

最初渲染时会出现一个文本框，里面的值是 14。当用户输入更多数字时，它会按预期发生变化。但是，当用户单击重置按钮时，没有任何反应。仍然显示用户输入的最后一个数字。我本来希望文本框中的数字重置为 14。重置方法正在被调用，并且componentKey每次单击重置按钮时都会正确递增，因为这是可见的：

parent 1
parent 2
parent 3
parent 4
parent 5

此示例显示了按 5 次按钮后控制台中显示的内容。那么为什么文本框中的值没有被重置为 14？

Answer 1

发生这种情况是因为在内存中 testInput 已经改变了

  reset() {   
  this.componentKey += 1;   
  this.testInput = 14; //ADD THIS   
  console.log('parent ' + this.componentKey);    
  }