1***@qq.com
1***@qq.com
  • 发布:2022-11-05 22:18
  • 更新:2022-11-07 10:08
  • 阅读:290

第一次填写内容添加tag后,点击重置成功,然后在添加tag,此时发现全局变量被修改了,为什么全局变量会被修改?示例代码如下:

分类:uni-app
<template>  
    <view class="page-menu">  
        <view class="wrap acea-row">  
            <view class="item acea-row row-center-wrapper" v-for="(item, index) in menuLst" :key="index">  
                <view>{{item}}</view>  
                <view class="iconfont icon-guanbi1" @click="del(index)"></view>  
            </view>  
        </view>  
        <view class="footer">  
            <view class="reset" @click="reset">重置</view>  
            <view class="input">  
                <input class="input" type="text" maxlength="10" v-model="input" placeholder="请输入内容">  
            </view>  
            <view class="add" @click="add">确定</view>  
        </view>  
    </view>  
</template>  

<script>  
    export default{  
        data(){  
            return {  
                input: '',  
                menuLst: [],  
            }  
        },  
        onLoad() {  
            const menu = this.$cache.get('FOOD_MENU');  
            if(menu){  
                this.menuLst = JSON.parse(menu);  
            }else{  
                this.menuLst = getApp().globalData.food_menu;  
            }  
        },  
        methods: {  
            add(){  
                let input = this.input.trim();  
                if(input == '') return false;  
                var menu = this.menuLst;  
                const index = menu.findIndex(item=>item === input);  
                if(index > -1){  
                    menu.splice(index, 1)  
                }  
                menu.push(input);  
                this.input = '';  
                this.menuLst = menu;  
                this.$cache.set('FOOD_MENU', menu);  
            },  
            del(index){  
                var menu = this.menuLst;  
                menu.splice(index, 1);  
                this.menuLst = menu;  
                this.$cache.set('FOOD_MENU', menu);  
            },  
            reset(){  
                var list = getApp().globalData.food_menu;  
                this.menuLst = list;  
                this.$cache.set('FOOD_MENU', list);  
            }  
        }  
    }  
</script>  

<style scoped lang="scss">  
    .wrap{  
        padding: 30rpx;  
        .item{  
            position: relative;  
            min-width: 60rpx;  
            height: 80rpx;  
            padding: 0 30rpx;  
            margin: 0 24rpx 24rpx 0;  
            background-color: #ecf5ff;  
            font-size: 26rpx;  
            color: #409eff;  
            border-radius: 16rpx;  
            border: 1px solid #d9ecff;  
            .iconfont{  
                margin: 0 -20rpx 0 10rpx;  
            }  
        }  
    }  
    .footer{  
        display: inline-table;  
        padding: 30rpx;  
        view{  
            padding: 0 20px;  
            color: #909399;  
            vertical-align: middle;  
            display: table-cell;  
            border: 1px solid #dcdfe6;  
            border-radius: 8rpx;  
            white-space: nowrap;  
            background-color: #f5f7fa;  
            &.reset{  
                background-color: #ffffff;  
                border-right: 0;  
                border-top-right-radius: 0;  
                border-bottom-right-radius: 0;  
            }  
            &.input{  
                width: 100%;  
                height: 40px;  
                line-height: 40px;  
                padding: 0 15px;  
                border: 1px solid #dcdfe6;  
                border-radius: 0;  
                background-color: #fff;  
                color: #606266;   
                input{  
                    width: 100%;  
                    height: 100%;  
                    font-size: 30rpx;  
                }  
            }  
            &.add{  
                border-left: 0;  
                border-top-left-radius: 0;  
                border-bottom-left-radius: 0;  
            }  
        }  
    }  
</style>
2022-11-05 22:18 负责人:无 分享
已邀请:
DCloud_UNI_WZF

DCloud_UNI_WZF

建议断点检查代码逻辑或了解下深浅拷贝

  • 1***@qq.com (作者)

    解决了,非常感谢你!就是深浅拷贝的问题!!!

    2022-11-07 21:55

该问题目前已经被锁定, 无法添加新回复