我们目前正在考虑在我们的最新项目中使用 VueJs 2.0,但是我们很早就遇到了一些困难,我们希望有一个简单的解决方案!
所以我们正在使用 Laravel 生成超过 150 个表单字段,我们想将这些参数绑定(bind)到 Vue。目前,使用 Angular 1.4,我们只有 ng-model="form.data.field"
并创建一个漂亮的大对象发送到后端进行处理...
在 Vue 中,您似乎必须在 data
参数中明确定义所有内容,我们已尝试定义一个对象,例如:
data:{
form: {}
}
然后适用于 v-model="form.item"
但 v-model="form.item.item2"
错误。
是否可以在 VueJS 中复制它?
最佳答案
我有一个项目在做类似的事情。它有几个核心字段,但用户可以添加自己的字段,所有这些字段都是动态呈现的。我们将字段作为 json 存储在具有 4 列的 section_schema 表中:|id |节名 |模式 |禁用
模式包含呈现动态表单所需的任何内容。我们核心数据的一些特定格式有点笨拙,但效果很好。我跳过了我们在后端做的准备工作,因为我不想让它变得太长。以下是基础知识:
section_schema 中的基本 json:
{
"Company Name":{
"cols":"8",
"field_name": "company_name",
"type":"string",
"order":"0",
"required":"1"
},
"Member Type":{
"cols":"4",
"field_name": "member_type",
"type":"dropdown_fromdata",
"order":"1",
"required":"1",
"dropdown":{"table" : "membershipType", "field": "name"}
},
"Website":{
"cols":"4",
"field_name": "company_website",
"type":"string",
"order":"2",
"required":"0"
},
... others
在 vue 组件中:
<div class="col-sm-6" v-for="v in dataType">
<div class="white-box">
<h3 class="box-title">{{v.section_name}}</h3>
<form class="form-material form-horizontal m-t-30" :id="v.section_id">
<input type="hidden" :value="v.section_id" id="type" name="type">
<div class="form-group" v-for="i in v.field_data">
<label class="col-md-12" :for="i.id">{{i.name}}</span></label>
<div class="col-md-12">
<select v-if="i.id === 'company_info-member_type'" class="form-control" style="width: 100%;" size="1" :value="i.value" :id="i.id" :name="i.id">
<option value="" selected disabled>Please select</option>
<option v-for="mt in membershipTypes" :value="mt.name">{{mt.name}}</option>
</select>
<select v-else-if="i.id === 'company_info_status'" class="form-control" style="width: 100%;" size="1" :value="i.value" :id="i.id" :name="i.id">
<option value="" selected disabled>Please select</option>
<option v-for="status in statuses" :value="status.name">{{status.name}}</option>
</select>
<datepicker v-else-if="i.id === 'company_info-anniversary'" :format="format" :value="setDate(i.value)" :id="i.id" :name="i.id"></datepicker>
<input v-else-if="i.type == 'phone'" :type="i.type" :id="i.id" :name="i.id" class="form-control" :placeholder="i.name" :value="i.value" data-mask="(999) 999-9999">
<input v-else :type="i.type" :id="i.id" :name="i.id" class="form-control" :placeholder="i.name" :value="i.value">
</div>
</div>
<button @click.prevent="saveMemberChanges(v.section_id)" class="btn btn-info waves-effect waves-light m-r-10">Submit</button>
</form>
</div>
</div>
编辑:更多信息
我们的数据:
data () {
return {
dataType: [],
}
},
methods: {
getDataTypes: function(){
var id = this.member.id
this.$http.get('/member/details/json/'+id).then((response) => {
var data = response.data
this.dataType = data
}, (response) => {
...
});
},
}
关于javascript - VueJS 动态模型绑定(bind),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42378437/