vue动态绑定model
<body>
<div id="app">
<label for="incanteen"><input type="radio" v-model="type" value="incanteen" id="incanteen">incanteen</label>
<label for="pickup"><input type="radio" v-model="type" value="pickup" id="pickup">pickup</label>
<label for="pickfor"><input type="radio" v-model="type" value="pickfor" id="pickfor">pickfor</label>
<hr>
<div v-for="item,index in extraFliedList" :key="item.sortnum">
<span>{{index+1}}.{{item.value}}通知:</span>
<input v-model="extraFliedList[index].newVal" type="text" :placeholder="item.des">
</div>
<button @click="submit">submit</button>
<hr>
<div>thisextraObj-{{thisextraObj}}</div>
</div>
</body>
<script>
new Vue({
el: "#app",
data() {
return {
type: "incanteen",
thisextraObj: {},
extraFlied: [{
key: "remark",
value: "备注",
des: "incanteen, pickup true 3",
required: true,
type: "incanteen, pickup",
sortnum: 3
}, {
key: "remark2",
value: "备注6",
des: "incanteen, pickfor false 6",
required: false,
type: "incanteen, pickfor",
sortnum: 6
}, {
key: "remark3",
value: "备注3",
des: "pickup, pickfor true 7",
required: true,
type: "pickup, pickfor",
sortnum: 7
}, {
key: "remark4",
value: "备注4",
des: "incanteen false 1",
required: false,
type: "incanteen",
sortnum: 1
}, {
key: "remark5",
value: "备注5",
des: "pickfor true 2",
required: true,
type: "pickfor",
sortnum: 2
}],
}
},
computed: {
extraFliedList() {
return this.extraFlied.filter(item => item.type.includes(this.type)).sort(this.sortByArr(['sortnum'], true)).map(item => {return {...item,newVal: ""}})
}
},
methods: {
sortByArr(arr, rev) {
if (rev == undefined) {
rev = 1;
} else {
rev = rev ? 1 : -1;
}
return function(a, b) {
for (var i = 0; i < arr.length; i++) {
let attr = arr[i];
if (a[attr] != b[attr]) {
if (a[attr] > b[attr]) {
return rev * 1;
} else {
return rev * -1;
}
}
}
};
},
submit() {
let extraObj = {}
for (const element of this.extraFliedList) {
extraObj[element.key] = element.newVal
if (element.required) {
if (element.newVal) {
extraObj[element.key] = element.newVal
} else {
alert(`${element.value}不能为空`)
break
}
}
}
this.thisextraObj = extraObj
console.log("this.thisextraObj", this.thisextraObj)
}
}
})
</script>