vue.js - v-model 上的 textarea 重置不会重置 textarea 中的文本

Question

当用户单击撤消按钮时，我想重置 textarea 中的文本。

输入的数据属性heading和body文本区域确实正在重置，但我只看到标题输入被重置，正文的文本区域确实删除了文本。

<form @submit.prevent="handleSubmit">
  <input  v-model="heading" placeholder="Heading" />
  <textarea  v-model="body" placeholder="Note..." />
  <button type="submit" ><i class="material-icons">send</i></button>
  <button type="button" @click="resetNote" ><i class="material-icons">undo</i></button>
</form>

export default {
  data() {
    return {
      heading: '',
      body: ''
    }
  },
  methods: {
    resetNote() {
      console.log('resetNote')
      this.heading = '';
      this.body = '';
    },
    handleSubmit() {
      console.log('handleSubmit')
      console.log(`${this.heading} - ${this.body}`)
    }
  }
};

标签： vue.jstextareabootstrap-vue