ruby-on-rails - Vue.js 在 if 评估后清除数据

Question

我正在使用 Vue.js 在 Rails 5 中制作一个多步骤表单。我注意到，当重新评估 v-if 时，输入字段中的文本会被清除。有没有办法通过表单步骤和其他 v-if 评估来保存信息？

这是我的表单:

<fieldset class="listing-step" v-if="activeStep === 0">
  <h2>Basics</h2>

  <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1" class="btn btn-secondary" />

  <div class="row">
    <div class="col">
      <div class="form-group">
        <strong><%= f.label :name %></strong><br>
        <%= f.text_field :name, class: 'form-control' %>
      </div>
    </div>
  </div>
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 1">
  <h2>Location</h2>

  <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0"  class="btn btn-secondary" />
  <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1"  class="btn btn-secondary" />


  <div class="row">
    <div class="col">

      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="map_search" id="map_search_address" value="address" v-on:click="by_address = true" checked>
          Set by address
        </label>
      </div>
      <div class="form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="radio" name="map_search" id="map_search_coords" value="coords" v-on:click="by_address = false">
          Set by coordinates
        </label>
      </div>

    </div>
  </div>

  <div id="listing-location">
    <transition name="fade">
      <fieldset id="listing-location-child" name="address" v-if="by_address">
        <div class="row">
          <div class="col">
            <div class="form-group">
              <strong><%= f.label :city %></strong><br>
              <%= f.text_field :city, class: 'form-control', 'v-bind:readonly': '!by_address' %>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <strong><%= f.label :state %></strong><br>
              <%= f.text_field :state, class: 'form-control', 'v-bind:readonly': '!by_address' %>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <div class="form-group">
              <strong><%= f.label :address %></strong><br>
              <%= f.text_field :address, class: 'form-control', 'v-bind:readonly': '!by_address' %>
            </div>
          </div>
        </div>
      </fieldset>
    </transition>

    <transition name="fade">
      <fieldset id="listing-location-child" name="coords" v-if="!by_address">
        <div class="row">
          <div class="col">
            <div class="form-group">
              <strong><%= f.label :lat, 'Latitude' %></strong><br>
              <%= f.number_field :lat, in: -90.0..90.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %>
            </div>
          </div>
          <div class="col">
            <div class="form-group">
              <strong><%= f.label :lng, 'Longitude' %></strong><br>
              <%= f.number_field :lng, in: -180.0..180.0, step: :any, class: 'form-control', 'v-bind:readonly': 'by_address' %>
            </div>
          </div>
        </div>
      </fieldset>
    </transition>
  </div>
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 2">
  <h2>Amenities</h2>

  <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0"  class="btn btn-secondary" />
  <input type='button' value="Next" name='next' @click="activeStep++" :disabled="activeStep === stepList.length - 1"  class="btn btn-secondary" />

  <div class="row">
    <div class="col">
      <div class="form-group">
        <strong>Amenities</strong><br>
        ...
      </div>
    </div>
  </div>
</fieldset>

<fieldset class="listing-step" v-if="activeStep === 3">
  <h2>Images</h2>

  <input type='button' value="Previous" name='prev' @click="activeStep--" :disabled="activeStep === 0"  class="btn btn-secondary" />

  <div class="row">
    <div class="col">
      <div class="form-group">
        <strong>Images</strong><br>
        ...
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <div class="actions">
        <%= f.submit class: 'btn btn-success' %>
      </div>
    </div>
  </div>
</fieldset>

和我的 Vue 初始化:

const progress = new Vue({
  el: '#vue-listing',
  data: {
    activeStep: 0,
    by_address: true,
    stepList: [
      {id: 0, text: 'Basics'},
      {id: 1, text: 'Location'},
      {id: 2, text: 'Amenities'},
      {id: 3, text: 'Images'}
    ]
  }
})

提前致谢!

Answer 1

将 v-if 更改为 v-show 或保留 Data() 中的输入值，并将 v-model 指令添加到每个输入字段。因此，当再次渲染 v-ifed 控件时，v-model 值将更改其 html 值