Vue点击编辑按钮后无法将原有内容填充到textarea的问题求助

问题原因&修复方案 #

1. textarea属性写法错误 #

你把textarea的属性全部写在了标签闭合区间内，属性必须放在<textarea>的起始标签中，不能夹在起始和闭合标签中间，且属性之间不需要加逗号分隔。

2. 编辑触发时未同步最新值 #

如果points.singlePoint是异步获取的数据（比如接口返回内容），组件初始化时points.singlePoint.description可能还未赋值，而且你点击编辑按钮显示textarea时，没有主动把最新的描述内容同步给newDescriptionData，就会出现textarea为空的情况。

3. v-if触发组件销毁重建问题 #

v-if会在条件为false时直接销毁textarea组件，下次显示时会重新初始化，只会读取newDescriptionData的初始值，不会自动同步最新的描述内容。

修正后的代码 #

HTML部分 #

<p> {{ points.singlePoint?.description }}</p>
<!-- 编辑图标绑定点击事件 -->
<span @click="openEditDescription">Edit icon here.</span>
<textarea
  placeholder="Add chapter description..."
  v-model="newDescriptionData"
  v-if="updateDescriptionWindow"
></textarea>

JS逻辑部分 #

import { ref } from 'vue'

const points = ref({ singlePoint: { description: '' } })
const updateDescriptionWindow = ref(false)
const newDescriptionData = ref('')

// 点击编辑按钮的触发方法
const openEditDescription = () => {
  // 打开编辑框前先同步最新的描述内容到绑定变量
  newDescriptionData.value = points.value.singlePoint?.description || ''
  updateDescriptionWindow.value = true
}

return {
  points,
  newDescriptionData,
  updateDescriptionWindow,
  openEditDescription
}

内容的提问来源于stack exchange，提问作者Dave