如何使用Vue.js更新此textarea中绑定的数据？

Question

我使用Vue.js定义了一个textarea：

<textarea type="textarea" v-model='myvalue'>
  {{myvalue}}
</textarea>

此处的数据在单个组件文件（.vue文件）中定义：

export default {
  name: 'app',
  data () {
    return {
      myvalue : ''
    }
  }
}

因此，当我在textarea中输入内容时，this.myvalue会更新。

但是当我想从JavaScript中更改值时，我发现UI / DOM没有变化：

this.myvalue = 'test'; // DOM doesn't get updated

如何更改myvalue的值，以便由Vue自动更新DOM？

注意：我正在使用Framework-vue lib的textarea组件。

Answer 1

this.myvalue = 'test'; // DOM will get updated

Answer 2

如Vue.js指南中所述，textareas上的插值不起作用。

您必须使用v-model：

<textarea v-model="myvalue"></textarea>

请参阅https://vuejs.org/v2/guide/forms.html#Multiline-text

您应该从{{myvalue}}标记中删除<textarea>：

<textarea type="textarea" v-model='myvalue'></textarea>

Answer 3

似乎我使用的Framework7-Vue plugin的Vue.js组件中存在错误。请参阅此票证中的详细信息：https://github.com/nolimits4web/Framework7-Vue/issues/74