Question

这是我的嵌入式代码：

HTML：

<div id="user-panel">
     <div class="text-center">
       {{ fillItem }}
     </div>     

          <form method="POST" action="http://site5/user_account/experiences/17" accept-charset="UTF-8" v-on:submit.prevent="updateItem(17)">

            <input name="_method" type="hidden" value="PATCH">
            <!-- Employer Field -->
            <div class="form-group col-sm-6">
              <label for="employer">Employer:</label>
              <input class="form-control" v-model="fillItem.employer" name="employer" type="text" value="Some Emplyer" id="employer">
            </div>

            <!-- Designation Field -->
            <div class="form-group col-sm-6">
              <label for="designation">Designation:</label>
              <input class="form-control" v-model="fillItem.designation" name="designation" type="text"     value="some designation" id="designation">
            </div>
            <!-- Submit Field -->
            <div class="form-group col-sm-12">
              <input class="btn btn-primary" type="submit" value="Save">
            </div>
          </form>
</div>

使用Javascript：

<div id="user-panel">
     <div class="text-center">
       {{ fillItem }}
     </div>     

          <form method="POST" action="http://site5/user_account/experiences/17" accept-charset="UTF-8" v-on:submit.prevent="updateItem(17)">

            <input name="_method" type="hidden" value="PATCH">
            <!-- Employer Field -->
            <div class="form-group col-sm-6">
              <label for="employer">Employer:</label>
              <input class="form-control" v-model="fillItem.employer" name="employer" type="text" value="Some Emplyer" id="employer">
            </div>

            <!-- Designation Field -->
            <div class="form-group col-sm-6">
              <label for="designation">Designation:</label>
              <input class="form-control" v-model="fillItem.designation" name="designation" type="text"     value="some designation" id="designation">
            </div>
            <!-- Submit Field -->
            <div class="form-group col-sm-12">
              <input class="btn btn-primary" type="submit" value="Save">
            </div>
          </form>
</div>

这是jsfiddle。

我想要实现的是将默认表单字段值加载到vue对象中。

表单字段确实有一些默认值，但是vue将它们设为空白。如何在vue中加载默认表单值？我无法通过直接vue对象嵌入值，因为值将是动态的，Javascript代码将放在special.js文件中。

Answer 1

Doc中有<input v-model='something'>的解释：

<input :value='something' @input="value => { something = value }">

只是

的语法糖

value

因此，在为输入赋值后，Vue会根据上面的Vue实例的数据重置输入值。这意味着您无法通过输入标记的var select= document.getElementsByTagName('select'); for(var i = 0, i < select.length, i++) { select[i].addEventListener("change", function(event) { // validate }); }属性将默认表单字段值传递给Vue对象。

初始化时，您可以尝试在初始化Vue实例时直接设置Vue对象，或者在动态访问默认值的Callback函数中修改Vue对象。

希望对你有所帮助。

如何将默认表单值加载到vue对象中？

1 个答案: