li222248
白开水z
采纳率0%
2021-02-27 09:35

vue 为什么created()初始化 会输出五次??

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • zt13502162671 zt13502162671 2月前

    我猜下,是不是你模块化,比如template五次,就要调用template内的创建方法5次,或者是前面调用template的页面循环执行了5次,比如v-for里面创建了5次.

     

    点赞 评论 复制链接分享
  • li222248 白开水z 2月前

      

    <template>

        <div class="index">

           <el-tabs type="border-card" @tab-click="show_upsPage">

                <el-tab-pane label="商品管理">

                    <div class="mains">

                        <div class="menu">

                            <el-menu

                                default-active="2"

                                class="el-menu-vertical-demo"

                                @open="handleOpen"

                                @close="handleClose"

                                background-color="#263445"

                                text-color="#fff"

                                active-text-color="#ffd04b">

                                <el-submenu index="1">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>商品管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/cates/catelist')"><i class="el-icon-s-tools"></i>商品列表</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>  

                                <el-submenu index="2">

                                    <template slot="title">

                                    <i class="el-icon-menu"></i>

                                        <span>分类管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="2-1" @click="jump('/cates/sortlist')"><i class="el-icon-s-tools"></i>品种分类</el-menu-item>

                                    </el-menu-item-group>  

                                    <el-menu-item-group>

                                        <el-menu-item index="2-2" @click="jump('/cates/markesort')"><i class="el-icon-s-tools"></i>营销分类</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>     

                            </el-menu> 

                        </div>

                        <div class="content">

                            <div class="main">

                                <router-view></router-view>

                            </div>

                        </div>

                    </div>

                </el-tab-pane>

                <el-tab-pane label="营销管理">

                    <div class="mains">

                        <div class="menu">

                            <el-menu

                                default-active="2"

                                class="el-menu-vertical-demo"

                                @open="handleOpen"

                                @close="handleClose"

                                background-color="#263445"

                                text-color="#fff"

                                active-text-color="#ffd04b">

                                <el-submenu index="1">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>活动管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/markes/list')"><i class="el-icon-s-tools"></i>首页管理</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>  

                            </el-menu>

                        </div>

                        <div class="content">

                            <div class="main">

                                <router-view></router-view>

                            </div>

                        </div>

                    </div>

                </el-tab-pane>

                <el-tab-pane label="企业管理">

                    <div class="mains">

                        <div class="menu">

                            <el-menu

                                default-active="2"

                                class="el-menu-vertical-demo"

                                @open="handleOpen"

                                @close="handleClose"

                                background-color="#263445"

                                text-color="#fff"

                                active-text-color="#ffd04b">

                                <el-submenu index="1">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>企业管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/company/content')"><i class="el-icon-s-tools"></i>企业介绍</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>  

                            </el-menu>

                        </div>

                        <div class="content">

                            <div class="main">

                                <router-view></router-view>

                            </div>

                        </div>

                    </div>

                </el-tab-pane>

                <el-tab-pane label="系统管理">

                    <div class="mains">

                         <div class="menu">

                            <el-menu

                                default-active="2"

                                class="el-menu-vertical-demo"

                                @open="handleOpen"

                                @close="handleClose"

                                background-color="#263445"

                                text-color="#fff"

                                active-text-color="#ffd04b">

                                <el-submenu index="1">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>系统管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/system/workers')"><i class="el-icon-s-tools"></i>后台管理</el-menu-item>

                                    </el-menu-item-group>   

                                    <el-menu-item-group>

                                        <el-menu-item index="1-2" @click="jump('/system/vip')"><i class="el-icon-s-tools"></i>会员管理</el-menu-item>

                                    </el-menu-item-group>   

                                    <el-menu-item-group>

                                        <el-menu-item index="1-3" @click="jump('/system/users')"><i class="el-icon-s-tools"></i>用户管理</el-menu-item>

                                    </el-menu-item-group>  

                                </el-submenu>        

                            </el-menu>

                        </div>

                        <div class="content">

                            <div class="main">

                                <router-view></router-view>

                            </div>

                        </div>

                    </div>

                </el-tab-pane>

                <el-tab-pane label="竞品管理">

                    <div class="mains">

                        <div class="menu">

                            <el-menu

                                default-active="2"

                                class="el-menu-vertical-demo"

                                @open="handleOpen"

                                @close="handleClose"

                                background-color="#263445"

                                text-color="#fff"

                                active-text-color="#ffd04b">

                                <el-submenu index="1">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>竞品管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/competing/list')"><i class="el-icon-s-tools"></i>竞品列表</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>  

                                <el-submenu index="2">

                                    <template slot="title">

                                        <i class="el-icon-menu"></i>

                                        <span>企业管理</span>

                                    </template>

                                    <el-menu-item-group>

                                        <el-menu-item index="1-1" @click="jump('/company/list')"><i class="el-icon-s-tools"></i>企业列表</el-menu-item>

                                    </el-menu-item-group>   

                                </el-submenu>  

                            </el-menu>

                        </div>

                        <div class="content">

                            <div class="main">

                                <router-view></router-view>

                            </div>

                        </div>

                    </div>

                </el-tab-pane> 

            </el-tabs>

        </div> 

    </template>

     

    <script>

    // import {getMenuListApi} from "@/api"

      export default {

        data(){

            return{

                tabsList:[]

            }

        },

        // created(){

            // this.initData();

        // },

        methods: {

          handleOpen(key, keyPath) {

            console.log(key, keyPath);

          },

          handleClose(key, keyPath) {

            console.log(key, keyPath);

          },

          //获取菜单栏接口数据

           initData () {

                getMenuListApi({

                   appValue:2

                })

                .then(res => {

                    console.log(res.data)

                    this.tabsList=res.data;

                })

            },

        

            show_upsPage(e){

                console.log('show_upsPage',e)

                this.initData(e.$attrs.id);

            }

        }

    }

    </script>

    点赞 评论 复制链接分享
  • summer_du summer_du 2月前

    我亲测了一下,你这个页面没问题。是不是你别的地方也引用这个页面了?引用了5次?

    点赞 评论 复制链接分享
  • li222248 白开水z 2月前

    <template>

        <div id="sortlist">

            <el-card class="box-card">

                <div slot="header" class="clearfix">

                    <span>新增竞品</span>

                </div>

                <div class="content">

                        <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">

                             <el-form-item  label="商品相册"> 

                                <el-upload

                                :action="uploadUrl"

                                list-type="picture-card"

                                :on-preview="handlePreview"

                                :on-success="handleSuccess"

                                :on-remove="handleRemove"

                                multiple

                                >

                                <i class="el-icon-plus"></i>

                                </el-upload>

                                <el-checkbox v-model="numberValidateForm.imageUrl[index].main" v-for="(item,index) in numberValidateForm.imageUrl" :key="item.uid" @change="(value)=>{imageMainChange(value, index)}">是否显示为主图</el-checkbox> 

                                <!-- 预览图片 -->

                                <el-dialog :visible.sync="dialogVisible">

                                     <img width="100%" :src="dialogImageUrl" alt=""> 

                                </el-dialog>

                            </el-form-item>

                             <el-form-item label="商品" prop="age">

                                <el-autocomplete

                                class="inline-input"

                                v-model="state1"

                                :fetch-suggestions="querySearch"

                                placeholder="请输入商品"

                                @select="handleSelect"

                                ></el-autocomplete>

                            </el-form-item>

                             <el-form-item label="企业" prop="age">

                                <el-autocomplete

                                class="inline-input"

                                v-model="state1"

                                :fetch-suggestions="querySearch"

                                placeholder="请输入企业"

                                @select="handleSelect"

                                ></el-autocomplete>

                            </el-form-item>

                            <el-form-item

                                label="品名"

                                prop="age"

                                :rules="[

                                { required: true, message: '品名不能为空'},

                                { type: '', message: '品名必须两个字以上'}

                                ]"

                            >

                                <el-input type="age" v-model.number="numberValidateForm.name" autocomplete="off"></el-input>

                            </el-form-item> 

                            <el-form-item

                                label="货号"

                                prop="name"

                                :rules="[

                                { required: true, message: '货号不能为空'}

                                ]"

                            >

                                <el-input type="name" v-model.number="numberValidateForm.sn" autocomplete="off"></el-input>

                            </el-form-item>

                           

                            <el-form-item label="用料" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.yongliao" autocomplete="off"></el-input>

                            </el-form-item>

                            <el-form-item label="织造工艺" prop="age">

                                <el-input class="textarea" type="textarea" v-model.number="numberValidateForm.zhizao" autocomplete="off"></el-input>

                            </el-form-item>

                            <el-form-item label="染整工艺" prop="age">

                                <el-input class="textarea" type="textarea" v-model.number="numberValidateForm.ranzheng" autocomplete="off"></el-input>

                            </el-form-item>

                            <el-form-item label="开机数" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.kaiji" autocomplete="off"></el-input>

                            </el-form-item>

                              <el-form-item label="坯布价" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.pibu" autocomplete="off"></el-input>

                            </el-form-item>

                              <el-form-item label="后整价" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.houzheng" autocomplete="off"></el-input>

                            </el-form-item>

                              <el-form-item label="成本价" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.chengben" autocomplete="off"></el-input>

                            </el-form-item>

                              <el-form-item label="零售价" prop="age">

                                <el-input type="age" v-model.number="numberValidateForm.lingshou" autocomplete="off"></el-input>

                            </el-form-item>

     

                            <el-form-item>

                                <div class="box_btn">

                                    <el-button type="primary" size="mini" class="btn">保存</el-button>

                                    <el-button plain size="mini" class="return-btn" @click="jump('/competing/list')">返回</el-button>

                                </div>

                            </el-form-item>

                    </el-form>

                     

                </div>

                

            </el-card>

        </div>

    </template>

     

    <script>

    import axios from 'axios'

      export default {

        data() {

            return {

                //上传到后台的Api接口网址

                uploadUrl:axios.defaults.baseURL+"rivalGoods/file/upload",

                //激活即列出输入建议

                restaurants: [],

                state1: '',

                state2: '',

                //上传图片

                dialogImageUrl: '',

                dialogVisible: false,

                //表单数据

                numberValidateForm: {

                    imageUrl:[],

                    name: '',

                    sn:'',

                    yongliao:'',

                    zhizao:'',

                    ranzheng:'',

                    kaiji:'',

                    pibu:'',

                    houzheng:'',

                    chenggben:'',

                    lingshou:''

                },

            };

        },

        created(){

           console.log('99999')

        },

        mounted() {

            //激活即列出输入建议(商品)

            this.restaurants = this.loadAll();

        },

       

        methods: {

            //上传图片

                handleRemove(file, fileList) {//移除图片

                    console.log(file, fileList);

                },

                handlePreview(file) {//预览图片

                    this.dialogImageUrl = file.url;

                    this.dialogVisible = true;

                },

                imageMainChange(value, index){//是否勾选是否显示主图

                    if(value){

                        this.numberValidateForm.imageUrl.forEach((item, idx)=>{

                        if(idx == index){

                            this.numberValidateForm.imageUrl[idx].main = true

                        }else{

                            this.numberValidateForm.imageUrl[idx].main = false

                        }

                        })

                    }

                },

                handleSuccess(response, file, fileList){//上传图片成功

                    //重新封装this.numberValidateForm.imageUrl

                    this.numberValidateForm.imageUrl.push({

                        uid: file.uid,

                        url: file.url,

                        fileId: response.data.id,

                        main: false

                    })

                },

            //激活即列出输入建议(商品)

                querySearch(queryString, cb) {

                    var restaurants = this.restaurants;

                    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;

                    // 调用 callback 返回建议列表的数据

                    cb(results);

                },

                createFilter(queryString) {

                    return (restaurant) => {

                        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);

                    };

                },

                loadAll() {

                    return[

                            { "value": "三全鲜食(北新泾店)", "address": "长宁区新渔路144号" },

                            { "value": "Hot honey 首尔炸鸡(仙霞路)", "address": "上海市长宁区淞虹路661号" },

                            { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },    

                        ]

                        

                },

                handleSelect(item) {

                    console.log(item);

                },    

        }  

    }

     

    </script>

     

    <style lang="scss" scoped>

        #sortlist{

            width: 100%;

            .el-card{

                width: 100%;   

            }

        }

            .text {

                font-size: 14px;

            }

            .item {

                margin-bottom: 18px;

            }

            .clearfix:before,

            .clearfix:after {

                display: table;

                content: "";

            }

            .clearfix:after {

                clear: both;

            }

            .box-card {

                width: 480px;

            }

            ::v-deep .ql-container{

                height: 600px;

            }

         

          //图片上传

        .avatar-uploader-icon[data-v-0fb7db25] {

        border: 1px dashed #d9d9d9;

        }

        .avatar-uploader .el-upload {

        border: 1px dashed #d9d9d9;

        border-radius: 6px;

        cursor: pointer;

        position: relative;

        overflow: hidden;

        }

        .avatar-uploader .el-upload:hover {

        border-color: #409eff;

        }

        .avatar-uploader-icon {

        font-size: 28px;

        color: #8c939d;

        width: 178px;

        height: 178px;

        line-height: 178px;

        text-align: center;

        }

        .avatar {

        width: 178px;

        height: 178px;

        display: block;

        }

        // 底部按钮

        .box_btn{

        width:100%;

        height: 60px;

        background: #fff;

        position: fixed;

        left: 200px;

        bottom: 0;

        z-index: 10;

        }

        .btn {

            position: fixed;

            bottom: 20px;

            left: 60%;

        }

        .return-btn{

            position: fixed;

            bottom: 20px;

            left: 55%;

        }

       .el-input , .textarea{

            width: 40%;

       }

    </style>

    点赞 评论 复制链接分享
  • qq_38334525 默默地写代码 2月前

    请贴出完整代码

    点赞 评论 复制链接分享

为你推荐