vue 页面渲染后更新数据无效果的处理方法 $set

小灰灰 2021-07-25 18:33 651阅读 0赞

#### 页面渲染后数据不更新的问题 ####

应用场景：  
一个组件套用组件的场景内：

父组件如下：

<show-add-toast @closeDialog="closeDialogClick" :title="status == 'add'?'新增':'修改'" :data="searchParams"
    :isTest="isTest" />

子组件代码如下：  
分析一下子组件的结构：

1.  有一个按钮，按钮的名称是父组件传递过来的  
    `<el-button size="mini" type="primary" @click="toAdd">{ {title}}</el-button>`
2.  有个弹窗，默认隐藏，但是隐藏不代表不渲染，点击按钮时，弹窗展示  
    `<el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" width="500px" ……`
3.  点击按钮时，会调用api接口，根据获取到的数据，决定弹窗展示的内容为成功还是失败信息。  
    `toAdd方法`
4.  还有一个孙子组件，在往孙子组件传值的时候，`data`没有传递过去，一直为`null`  
    `<test-shop @closeDialog="closeDialogClick" v-if="title=='新增' || title!='新增' && isTest" :data="title=='新增'?shopData.id:data.id" />`
5.  想了很多办法，最终查到了`$set`,哎，基础不扎实害死人。  
    `Vue.$set('要改变的对象','要改变的对象的属性名','更新成什么样的数据')`  
    所以在`toAdd`方法中，用到了以下的代码：  
    `this.$set(this.shopData, "id", res.data.id);`  
    一定要注意的事，子组件不要直接更改父组件传递过来的数据，我一开始就是直接用的`data`，父组件传递过来的数据，要父组件自己更改，不要在子组件中更改。切记。  
    为了能够实时渲染，在子组件的`data`中自定义一个参数，然后给参数赋值，这样就会实时更新到页面中了，当然还需要`$set`进行更新已经渲染的页面。

<template>
        <span>
            <el-button size="mini" type="primary" @click="toAdd">{ { title}}</el-button>
            
            <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" width="500px" align="center"
                :append-to-body="true">
                <div v-if="status" align="center">
                    <el-row class="iconSize success">
                        <i class="el-icon-success"></i>
                    </el-row>
                    <el-row class="content success">恭喜您,店铺{ { title}}成功。<span
                            v-if="title=='新增' || title!='新增' && isTest">需要验证店铺才可以发布任务了,赶紧去验证一下吧！</span>
                    </el-row>
                    <div class="dialog-footer">
                        <test-shop @closeDialog="closeDialogClick" v-if="title=='新增' || title!='新增' && isTest" :data="title=='新增'?shopData.id:data.id" />
                        <el-button type="primary" @click="toClose" v-else>关闭</el-button>
                    </div>
                </div>
                <div v-if="!status" align="center">
                    <el-row class="iconSize fail">
                        <i class="el-icon-error"></i>
                    </el-row>
                    <el-row class="content success">
                        <span>{ { title=="新增"?"新增失败，":"修改失败，"}}原因是:<span
                                class="red">{ { errorMessage}}</span>,</span>如有疑问，可联系客服处理
                    </el-row>
                    <div class="dialog-footer">
                        <el-button type="primary" @click="toClose">关闭</el-button>
                    </div>
                </div>
            </el-dialog>
        </span>
    </template>
    <script>
        import testShop from '@/views/shop/ShopHandle/testShop'
        import {  CheckPermission, checkParams } from '@/utils/globalUtils'
        import {  add, modify, modifyState, modifyAdmin } from '@/api/shop'
    
        export default { 
            name: 'showAddToast',
            props: { 
                title: { 
                    type: String,
                    default: '新增'
                },
                data: { 
                    type: Object,
                    required: true
                },
                isTest: { 
                    type: Boolean
                }
            },
            created() { 
                this.searchParams = checkParams(this.data, ["id", "shopName", "shopUrl", "verifyCode"]);
            },
            components: { 
                testShop
            },
            data() { 
                return { 
                    shopData: { },
                    searchParams: { },
                    dialogVisible: false,
                    status: null,
                    errorMessage: ''
                }
            },
            methods: { 
                toClose() { 
                    this.dialogVisible = false
                },
                isMobileNumber(phone) { 
                    var flag = false;
                    var message = "";
                    var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[4-9]{1})|(18[0-9]{1})|(199))+\d{8})$/;
                    if (phone == '') { 
                        // console.log("手机号码不能为空");
                        message = "手机号码不能为空！";
                    } else if (phone.length != 11) { 
                        //console.log("请输入11位手机号码！");
                        message = "请输入11位手机号码！";
                    } else if (!myreg.test(phone)) { 
                        //console.log("请输入有效的手机号码！");
                        message = "请输入有效的手机号码！";
                    } else { 
                        flag = true;
                    }
                    if (message != "") { 
                        this.$notify({ 
                            title: message
                        })
                    }
                    return flag;
                },
                toAdd() { 
                    // if (!this.isMobileNumber(this.data.phone)) { 
                    // return;
                    // }
                    if (this.title == '新增') { 
                        this.updateData(add, this.data)
                    } else { 
                        this.updateData(modify, this.data)
                    }
                },
                closeDialogClick() { 
                    this.dialogVisible = false;
                },
                updateData(cb, data) { 
                    cb(data).then(res => { 
                        if (this.title == '新增') { 
                            this.shopData = res.data
                            // this.$forceUpdate();
                            this.$set(this.shopData, "id", res.data.id);
                        }
                        this.$emit('closeDialog')
                        this.status = true
                        this.dialogVisible = true
                    }).catch(error => { 
                        this.status = false
                        this.dialogVisible = true
                        this.errorMessage = error.response.data.message;
                    })
                }
            }
        }
    </script>
    <style lang="scss" scoped>
        .iconSize { 
            font-size: 80px;
        }
    
        .iconSize.success { 
            color: #02AC6A;
        }
    
        .iconSize.fail { 
            color: #D90808;
        }
    
        .content { 
            height: 140px;
        }
    
        .content.success { 
            /* line-height: 140px; */
            margin-top: 20px;
            font-size: 12px;
        }
    
        .red { 
            color: #f40;
            font-weight: bold;
        }
    </style>