vue-文本字段绑定值不反映实际值

Question

我有一个简单的组件，它带有一个值道具，并显示一个用于编辑它的文本字段。如果数字是低于零，我希望它只是零，如果文本从文本字段I 希望它为零中删除。在我的emit事件中，可以看到我正在发出正确的值，只是它没有反映在文本字段本身中。

我有a fiddle link here，但是主要部分在下面列出：

<div id="app">
  <test-component v-model="foo"></test-component>
</div>

const TestComponent = {
    props: ['value'],
    template: `<div>{{value}}
    <input type="number" :value="value" @input="update($event.target.value)" />
  </div>`,
  methods: {
    update(value) {
      this.$emit("input", value <= 0 ? 0 : value)
    }
  }
}
new Vue({
  el: "#app",
  components: {
    'test-component': TestComponent
  },
  data: {
    foo: 1
  },

})

基本上发生的是，我可以看到事件正在以0值发出，但是，您可以看到{{value}}反映了道具中的内容，但是 textfield本身为空（或小于零）]

肯定有一些基本的误解，我认为：value应该反映现实，但显然不是。非常感谢您的帮助！

Answer 1

您需要在key上放置一个TestComponent，然后每次foo更新时都要更改密钥，这将触发重新渲染，这是这里的问题。

Answer 2

根据@Michael的回答，诀窍是使用key触发重新渲染。