javascript - Vuejs2：绑定到不断增长的对象数组的自动调整文本区域列表不会更新它们的值

Question

我将https://github.com/jackmoore/autosize绑定到a 中textarea列出的 s v-for，并且在增长绑定到该列表的数组结构时，我看到了一种奇怪的数据持久性行为：

在左侧，输入按预期移动到底部，而在右侧，新绑定textarea的 s 保持前一个的值textarea！

代码：https ://jsfiddle.net/adrienjoly/Lb3yqdso/6/

知道如何解决此映射/绑定问题吗？

Answer 1

nachocab 给了我这个答案：

确保您使用的是 key 属性。否则，vue 将尝试重用现有的 dom 元素，这可能会导致您看到的奇怪行为。

=> 它有效：https ://jsfiddle.net/adrienjoly/Lb3yqdso/8/

<p v-for="input, i in inputs">
  <autosizing-textarea :key="input.key" :value="input.text"></autosizing-textarea>
</p>

new Vue({
  el: '#demo',
  data: { inputs: [{ key:0 }] },
  methods: {
    add: function() {
      this.inputs.unshift({ key: this.inputs.length });
    },
  },
})