uniapp实现动态增删元素

uniapp实现动态增删元素

<template>
    <view>
        <view class="item-box" v-for="(item, index) in list">
            <input type="text" placeholder="请输入...">
            <button type="warning" @click="delItem(item)">删除</button>
        </view>
        <button type="primary" @click="addItem">新增组件</button>

        <button type="primaray" @click="submitBtn">提交</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: 1,
                list: [
                    {
                        id: 1
                    }
                ]
            }
        },
        methods: {
            addItem() {
                let add = {
                    id: parseInt(this.id)+1
                }
                this.list.push(add)
                this.id = parseInt(this.id)+1
            },
            delItem(item) {
                if (item.id == 1) {
                    uni.showToast({
                        title: '不能删除第1个',
                        icon: 'none'
                    })
                    return false;
                }
                this.list = this.list.filter((i) => {
                    return i != item
                })
            },
            submitBtn() {
                console.log(this.list)
            }
        }
    }
</script>

<style>
    .item-box{
        display: flex;
    }
</style>