javascript - 需要一种方法来包含 Vue.JS 的内联文本编辑

Question

<div class="uk-margin">
                <label class="uk-form-label" for="chkpt-fiberhood-stage-    
id">Stage</label>
                <div class="uk-form-controls">
                  <select class="uk-select" v-model="active_stage">
                    <option :value="null">No Stage</option>
                    <option v-for="stage in stages_meta"     
:value="stage.chkpt_stage_id">
                      {{ stage.chkpt_stage_name }}
                    </option>
                  </select>
                </div>
              </div>

这是我正在开发的网站上的代码片段。它使用 Vue.JS 的 v-for 指令根据“stage.chkpt_stage_id”的内容生成一个列表。

我想知道是否有一种方法可以显示一行文本框来更新“stage.chkpt_stage_id”的内容，而不仅仅是显示信息，这就是列表的用途无论如何(这只会让即时编辑变得更快)？

Answer 1

类似这样的事情吗？

<div class="uk-margin">
  <label class="uk-form-label" for="chkpt-fiberhood-stage-id">Stages</label>
  <div class="uk-form-controls">
    <ul>
      <li v-for="stage in stages_meta">
        {{ stage.chkpt_stage_name }}
        <input v-model="stage.chkpt_stage_id" />
      </li>
    </ul>
  </div>
</div>