Vue中文本输入的重置值

Question

我正尝试按照 "key-changing" 中的说明构建一个重置按钮，如 this blog post 中所示。这是代码：

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

Vue中文本输入的重置值

reset value of text input in Vue

vue.js

vue-native