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

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 代码将放置在一个特殊的.js文件中。

Answer 1

文档中有v-model的解释：

<input v-model='something'>

只是句法糖

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

因此，在你为输入赋值后，Vue 会通过上面 Vue 实例数据中的一些东西来重置输入的值。这意味着你不能通过输入标签的属性将默认表单字段值传递到 Vue 对象value。

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

希望能给你一点帮助。