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>

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