Category Archives: Javasript

[Solved] Uncaught DOMException: Failed to read the ‘sessionStorage’ property from ‘Window’: Access is denied for this document.

Solution:

Allow the site to use cookies; Chrome banned it directly.

Uncaught DOMException: Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document.

Files Upload Error: err_cert_common_name_invalid [How to Solve]

Scenario:

The front end needs to upload files to the back-end interface, but an error is reported err_cert_common_name_invalid

Solution:

In fact, it is a problem of HTTPS protocol trust. You can enter the developer mode, select the wrong statement in the console, right-click to open the link in a new window, and the browser will prompt that the link is unsafe. At this time, you can continue to trust the website and open it.

Just import the file next time.

By the way, record the code of uploading files with El upload:

CSS section

            <el-upload
              class="upload-demo"
              ref="upload"
              :headers="myheader"
              :action="actionUrl"
              :on-change="handleChange"
              :on-success="handlesuccess"
              :on-remove="handleRemove"
              :on-preview="handlePreview"
              :file-list="fileList"
              :show-file-list="false"
              :auto-upload="false"
              :on-exceed="handleExceed"
              style="float: left"
              :limit="1"
              accept=".xlsx, .xls"
              name="file"
            >
              <el-input v-model="form.snapPath" style="width: 300px"></el-input>
              <template #tip>
                <div class="el-upload__tip">
                  Upload files with keyword names, support .xlsx, .xls
                </div>
              </template>
            </el-upload>

JS part:

//submit files
    submitUpload() {
      this.submitLoading = true;
      let fd = new FormData();
      fd.append("name", this.fileList[0].name);
      fd.append("file", this.fileList[0].raw);
      let url =
        "";
      axios
        .post(url, fd, {
          headers: {
            "Content-Type": "multipart/form-data",
            "TOKEN": cookies.getToken()
          }
        })
        .then(() => {
          this.submitLoading = false;
          this.$message({
            message: "Upload Successfully!",
            type: "success"
          });
          this.handleClose();
        })
        .catch(() => {
          this.submitLoading = false;
        });
    },
    handleExceed(files) {
      this.$refs.upload.clearFiles();
      this.$refs.upload.handleStart(files[0]);
    },

 

Vue Render List Error: Avoid using non-primitive value as key, use string/number value instead.

As soon as you enter the page, an error is reported as follows

As soon as you enter a page, such a long string of errors will appear. This is because the key value may be repeated in the V-for loop, so this error will be reported. After checking the page code, it is found that the key value is duplicate

The key value must be unique. If it is repeated, an error will be reported.
this situation can be avoided by changing the key value to index or ID. (here, ID is best used for key to achieve the principle of unique key value and local reuse, which greatly saves DOM rendering)

How to Solve Vue Import Chinese Map & Echarts Import China Error

Complete code

<template>
    <div class="animated fadeIn" style="background-color: white">
        <Row>
            <div ref="chinaMap" id="chinaMap"></div>
        </Row>
    </div>
</template>
<script>
    // import echarts from 'echarts'
    import * as echarts from 'echarts';
    import 'echarts/map/js/china.js';

    export default {
        name: "ChinaMap",
        data () {
            return {
                dataList:[
                    {name: '南海诸岛', value: 0},
                    {name: '北京', value: 2170.7},
                    {name: '天津', value: 1559.6},
                    {name: '上海', value: 2423.78},
                    {name: '重庆', value: 3048.43},
                    {name: '河北', value: 7556.3},
                    {name: '河南', value: 9605},
                    {name: '云南', value: 4800.5},
                    {name: '辽宁', value: 4359.3},
                    {name: '黑龙江', value: 3788.7},
                    {name: '湖南', value: 6860.2},
                    {name: '安徽', value: 6323.6},
                    {name: '山东', value: 10047.2},
                    {name: '新疆', value: 2444.67},
                    {name: '江苏', value: 8029.3},
                    {name: '浙江', value: 5737},
                    {name: '江西', value: 4622.1},
                    {name: '湖北', value: 5917},
                    {name: '广西', value: 4885},
                    {name: '甘肃', value: 2625.71},
                    {name: '山西', value: 3702.35},
                    {name: '内蒙古', value: 2534},
                    {name: '陕西', value: 3835.44},
                    {name: '吉林', value: 2717.43},
                    {name: '福建', value: 3941},
                    {name: '贵州', value: 3580},
                    {name: '广东', value: 11346},
                    {name: '青海', value: 3983.8},
                    {name: '西藏', value: 3371.5},
                    {name: '四川', value: 8341},
                    {name: '宁夏', value: 681.79},
                    {name: '海南', value: 925.76},
                    {name: '台湾', value: 2369},
                    {name: '香港', value: 748.25},
                    {name: '澳门', value: 63.2}
                ]
            }
        },
        methods: {
            buildMap(){
                let myChart = echarts.init(this.$refs.chinaMap);
                let option = {
                    tooltip: {
                        formatter:function(params){
                            return params.seriesName+'<br />'+params.name+':'+params.value
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1500,
                        left: 'left',
                        top: 'bottom',
                        text: ['Hight','Low'],
                        inRange: {
                            color: ['#fff4e6', '#dd2002']
                        },
                        show:true
                    },
                    geo: {
                        map: 'china',
                        roam: false,
                        zoom:1.23,
                        label: {
                            normal: {
                                show: true,
                                fontSize:'10',//Note: If the map province name font is too large will lead to font overlap
                                color: 'rgba(0,0,0,0.7)'
                            }
                        },
                        itemStyle: {
                            normal:{
                                borderColor: 'rgba(0, 0, 0, 0.2)'
                            },
                            emphasis:{
                                areaColor: '#F3B329',//Mouse to select area color
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                shadowBlur: 20,
                                borderWidth: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    },
                    series : [
                        {
                            name: 'Messages',
                            type: 'map',
                            geoIndex: 0,
                            data:this.dataList
                        }
                    ]
                };
                myChart.setOption(option);
            }
        },
        mounted() {
            this.buildMap()
        }
    }
</script>

<style scoped>
    *{margin:0;padding:0}
    html,body{
        width:100%;
        height:100%;
    }
    #chinaMap{
        width:600px;
        height:450px;
        margin: 150px auto;
        border:none;
    }
</style>

The geojson of the map must be provided

echarts/map/js/china.js in ./node_modules/cache-loader/dist/cjs.js??ref–13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref–1-0!./nod e_modules/vue-loader/lib??vue-loader-options!./src/components/ChinaMap.vue?vue&type

Reason: the version of ecarts is too high. The vector map data previously provided by ecarts is from a third party. Because some data do not comply with the provisions of the national surveying and Mapping Law, the download service is temporarily suspended.

Solution: download the lower version [email protected]

npm ls echarts  // Check your version of echarts
npm install [email protected] --save  //Download the lower version echats contain china.js

Directly reducing the version may affect other icons. Multiple ecarts versions can be introduced at the same time

[Solved] Vue Baidu map loading error: cannot read properties of undefined (reading ‘centerandzoom’)

Because the map positioning function needs to be used in the project, then I made a reference to the Vue Baidu map document, which can obtain the location name and location coordinates by clicking the map, and then save them to the database. When users edit the location information, they can locate the corresponding geographical location on the map through the coordinates stored in the database. However, when I finish the function, I find that there will be an error message when I load it for the first time, but the function is normal, and there will be no error message when I operate later

No more nonsense, let’s talk about the solution first:

Change mounted() to obtain the coordinate data stored in the database, and request the coordinate data when changed to created(). The following is a detailed description:

There are a lot of error messages, as shown below:

Code part

Here I got the coordinate data in the database from other pages and stored it in vuex, and then fetched the value from vuex, here can also be changed to use axios to send a request to get the coordinate data stored in the database. The value of form.csr_address is the “storage address”, and form.lng and form.lat are latitude and longitude.

Finally, I found that because the data is obtained during mounting, but Baidu map rendering seems to be before mounting, it will cause an error if it has not obtained the data from vuex when it calls the coordinate data. Then change mounted() to created() to solve the problem.

[Solved] TypeError: Property value expected type of string but got null

Problem Description: the unapp compilation applet reports an error, but there is no problem on the H5 and app side

15:57:47.609 TypeError: Property value expected type of string but got null
15:57:47.609     at Object.validate (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\types\lib\definitions\utils.js:160:13)
15:57:47.615     at validateField (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\types\lib\validators\validate.js:24:9)
15:57:47.621     at validate (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\types\lib\validators\validate.js:17:3)
15:57:47.621     at builder (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\types\lib\builders\builder.js:38:27)
15:57:47.629     at Object.StringLiteral (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@babel\types\lib\builders\generated\index.js:350:31)
15:57:47.629     at parseEventByCallExpression (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:177:30)
15:57:47.642     at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:318:15
15:57:47.643     at Array.forEach (<anonymous>)
15:57:47.651     at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:317:28
15:57:47.651     at Array.forEach (<anonymous>)
15:57:47.662     at parseEvent (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:258:15)
15:57:47.662     at _processEvent (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:436:9)
15:57:47.670     at processEvent (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\event.js:497:5)
15:57:47.671     at D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\index.js:34:5
15:57:47.678     at Array.forEach (<anonymous>)
15:57:47.686     at traverseData (D:\Program Files\HBuilderX\plugins\uniapp-cli\node_modules\@dcloudio\uni-template-compiler\lib\script\traverse\data\index.js:33:13)
15:57:48.873 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):

The reason is that I used uview’s anti shake in the code and passed the parameters

<view @tap="$u.throttle(goGoodsDetai(item.id, item.supplierId),500)">

If parameters are not transmitted, it is normal

<view @tap="$u.throttle(goGoodsDetai,500)">

Vue: How to use Vue-router in Axios

background

When writing the home page of the test platform, I want to implement the route jump function in the click event of the histogram of echarts, and directly use this.$router.Push() an error will be reported: uncaught typeerror: cannot read property 'push' of undefined

Solve the pit encountered

First of all, I think about whether I can import the routing instance directly to see if it is OK:

import Router from 'vue-router';

Then jump like this:

Router.push(`/projects_list`)

Results:

Uncaught TypeError: vue_router__WEBPACK_IMPORTED_MODULE_2__.default.push is not a function

It is found that the imported route is empty:

Successfully solved

If you can’t use it directly, can you import the previous routing instances in Src/router/index ?Because this routing instance is the route passed in to the Vue instance in main, so:

import Router from '../../router/index.js'

Results:

Successful jump

[Solved] ERROR: HTTPSConnectionPool(host=’center.conan.io’, port=443):

Recently, I used Conan center to download the third-party library. It was good before, but suddenly it didn’t work

update the URL corresponding to Conan center. The latest is:

conan-center: https://center.conan.io [Verify SSL:True]

Previously, the default value was

https://conan.bintray.com/

Update Conan version

pip install --upgrade conan

the first run will automatically delete things related to the certificate. If not, go to the relevant directory and delete them manually. So far, the problem has been solved</ h6>

conan --version

WARN: Migration: Updating settings.yml
WARN: ****************************************
WARN: settings.yml is locally modified, can't be updated
WARN: The new settings.yml has been stored in: /home/xuke/.conan/settings.yml.new
WARN: ****************************************
Removing the 'cacert.pem' file...
Search Successfully

conan search boost -r=conan-center

Existing package recipes:

boost/1.69.0
boost/1.70.0
boost/1.71.0
boost/1.72.0
boost/1.73.0
boost/1.74.0
boost/1.75.0
boost/1.76.0
boost/1.77.0
boost/1.78.0

[Solved] Vue Axios error: TypeError: Cannot set property ‘tableData‘ of undefined

Problem background

Recently, I just started Vue, and there is a typical scene, which is also a simple pit. After requesting data through Axios, you need to give the data to tabledata in data, and the table component will automatically render according to the two-way binding of tabledata.

But when I assign a value, typeerror: cannot set property 'tabledata' of undefined. What the hell is going on.

analysis

The code looks like there’s nothing wrong with it…

export default {
  data() {
    return {
      total: 0, //Total number of default data
      searchParam:{
        limit: 10, //number of data items per page
        page: 1, //default start page
        certNumber: "",
        certLevel: "",
        certCompanyName: "",
      },
      tableData: []
    };
  },
onSearch: function(){
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        this.tableData=response.data.data;
        this.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }
};

However, the problem is this.tabledata because the functionis used, in the function, this points to the function itself, which is no longer the default this outside.

Solution:

Use a  that point  Outsite this , then call  that.tableData , easy to get.

onSearch: function(){
      const that=this; //Use that to solve the function internal this pointing problem
      axios.post('/api/certCompany/list2',JSON.stringify(this.searchParam))
      .then(function (response) {
        console.log(response);
        that.tableData=response.data.data;
        that.total=response.data.count;
      })
      .catch(function (error) {
        console.log(error);
      });
    }

[Solved] Vue Project Error: Invalid prop: custom validator check failed for prop “percentage”.

1.Question:

The progress bar component using elementui in Vue reports an error

2. The error information is as follows:

vue.runtime.esm.js:619 [Vue warn]: Invalid prop: custom validator check failed for prop "percentage".

found in

---> <ElProgress> at packages/progress/src/progress.vue
       <AllStoreStatisticsDialog> at src/components/vdialog/dialog/Baomu/AllStoreStatisticsDialog.vue
         <Dialog> at src/components/vdialog/VDialog.vue
           <DialogGroup> at src/components/vdialog/vDialogGroup.vue
             <App> at src/views/SYS/App.vue
               <App> at src/App.vue
                 <Root>

3. Causes and Solutions

The original code is as follows

<el-progress :percentage="percentage" :color="customColor"></el-progress>

reason:

The percentage attribute value set exceeds 100, and the value range of percentage is 0-100

Solution:

When assigning the percentage attribute, just make a ternary operation judgment. The code is as follows

<el-progress :percentage="percentage>100?100:percentage" :color="customColor"></el-progress>