2020-12-16

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>

 

上一篇:PimaIndiansdiabetes-数据预处理实验(一)


下一篇:教程:基于访问控制的ABAP CDS视图权限