需要一种方法来包含使用 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>