如何使用 Vue.js 更新此文本区域中绑定的数据？

Question

我使用 Vue.js 定义了一个文本区域，如下所示：

<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 指南中所述，文本区域的插值不起作用。

你必须使用v-model ：

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

见https://v2.vuejs.org/v2/guide/forms.html#Multiline-text

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

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

Answer 3

好像我使用的Framework7-Vue 插件的 Vue.js 组件有错误。 在此票证中查看详细信息： https ://github.com/nolimits4web/Framework7-Vue/issues/74