CODEWITHSUNDEEP
javascriptphpvue.js
Sagemel
Sagemel

Reputation: 35

Need a way to include in-line text editing with Vue.JS

<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>

Here's a code snippet from a website I'm working on. It's using Vue.JS's v-for directive to generate a list based on the contents of "stage.chkpt_stage_id".

What I'm wanting to find out is if there's a way to, instead of displaying just the information, display a line of text boxes that update the contents of "stage.chkpt_stage_id", which is what the list is intended for anyways (this will just make it faster to edit on the fly)?

Upvotes: 0

Views: 219

Answers (1)

Chocolord
Chocolord

Reputation: 493

Something like this ?

<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>

Upvotes: 1

Related Questions