2020-12-16

最新推荐文章于 2023-06-19 13:40:32 发布

王哒瞎

最新推荐文章于 2023-06-19 13:40:32 发布

阅读量181

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wwwwwwxjjj/article/details/111282227

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

王哒瞎

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="ty
复制链接

扫一扫

专栏目录