标签：12 16 true rev element pickfor 2020 incanteen type
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>
标签：12,16,true,rev,element,pickfor,2020,incanteen,type 来源： https://blog.csdn.net/wwwwwwxjjj/article/details/111282227
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。