Vue表单组件中Placeholder Prop初始不显示问题求助

问题根源 #

你写的FormAnswer组件里，<textarea>标签内部留了空格：

<textarea class="w-[700px]" :placeholder="ansPlaceholder"> </textarea>

这个空格会被识别成textarea的初始内容，而placeholder只有在输入框完全为空的时候才会显示，所以初始加载时看不到占位符，只有删掉这个空格（输入再删除内容）后才会出来。

修复方法 #

把textarea标签内部的空格删掉，改成自闭合标签或者空内容的闭合标签就行：

修改后的FormAnswer组件模板 #

<template>
  <div class="flex flex-col items-center justify-center gap-2">
    <!-- <p class="font-semibold">{{ ansLabel }}</p> -->
    <div
      class="flex items-center justify-center gap-5 rounded-3xl border-2 border-gray-300 p-5 shadow-md"
    >
      <!-- 用自闭合标签，内部无任何内容 -->
      <textarea class="w-[700px]" :placeholder="ansPlaceholder" />
      <input type="checkbox" name="isTrue" id="" />
    </div>
  </div>
</template>

或者也可以写成空的闭合标签：

<textarea class="w-[700px]" :placeholder="ansPlaceholder"></textarea>

效果验证 #

改完之后刷新页面，传递的ansPlaceholder值（比如"Answer A"）会在页面加载完成后直接显示为textarea的占位符，不用再输入删除内容触发。

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