HTML显示数据为空白时如何使forms保持原位

Question

每当 HTML 显示数据部分为空白时，我都会尝试使表单字段保持不变。 每当填写显示数据部分时，表单域确实会保持原位，但是当它为空白时，表单域会向上移动并略微向右缩进。 我试图以这样一种方式对其进行编码，当它为空白时，整个表单域不会向上移动，也不会略微向右缩进。

我的代码如下所示：

          <h2 :title="option.ID">
            <image/>
            {{ option.Name }}
          </h2>

            <div class="row">
             <label class="bold">Option Name</label>
            </div>
              <div class="optio ">
                  <input
                    v-model="option.Name"
                    :disabled="isDisabled(option)"
                  >
              </div>
            </div>

知道怎么做吗？ 谢谢！

Answer 1

由于在<h2>中呈现 option.Name ，当输入为空时，您的表单可能会向上移动。 但是，这可能取决于其中包含的图像的大小。

您能否尝试在{{ option.Name }}旁边添加一些虚拟文本，看看问题是否仍然存在？

例如：

<h2 :title="option.ID">
  <image
    id="photo"
    alt="`photo picture`"
    title="option image"
    class="image" />
    {{ option.Name }} dummy text
</h2>

如果窗体不再移动，可以考虑在 CSS 中设置 h2 的高度，或者在option.Name未定义时强制渲染一些文本：

<h2 :title="option.ID">
  <image
    id="photo"
    alt="`photo picture`"
    title="option image"
    class="image" />
    {{ option.Name || 'placeholder' }} dummy text
</h2>

在这里，占位符可以是任何你想要的，甚至是一个空格