Tag Archives: Solution of Vue error

Vue Import Baidu map error: BMap is not defined, eslint BMap reports an error

Leave a reply

When the mounted map is initialized, BMap is not defined due to asynchronous issues, that is, the map has been initialized before Baidu’s api is fully introduced or loaded.

Solution:

1. Create a map.js

export function MP(ak) {
   return  new Promise( function (resolve, reject) {
    window.init = function () {
      resolve(BMap)
    }
    var script = document.createElement('script' )
    script.type ='text/javascript' 
    script.src = `http: // api.map.baidu.com/api?v=2.0&ak=${ak}&callback=init` 
    script.onerror = reject
    document.head.appendChild(script)
  })
}

2. Reference in the .vue file 

import {MP} from'../map.js'

3. Initialize in the mounted function

   this .$nextTick(() => {
      const _this = this 
      MP(_this.ak).then(BMap => {
        _this.initMap()
      })
    })

Undefined BMap in map.js will report an error

 

 Solution:

Make a global declaration in eslintrc.js

  globals: {
    BMap: true 
  }

 

 That’s it~~

The browser is compatible with IE11 “ReferenceError: ‘Promise’ is not defined” “ReferenceError: ‘Promise’ is not defined”

Leave a reply

ReferenceError: “Promise” is not defined””

IE does not support promise solutions

//import
<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"> </script> 
//or 
<script type="text/javascript" src ="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

Promise does not support iE

VUE project

(1) cnpm install –save babel-polyfill

(2) Add code require(“babel-polyfill”) in webpack.base.conf.js

(3) Add the code import “babel-polyfill” in main.js;

React project

(1) cnpm install –save babel-polyfill

(2) Add the code import “babel-polyfill” in the entry file (app.js/router.js);

During the development of vue, v-for reported an error [vue/require-v-for-key] Elements in iteration expect to have’v-bind:key’ directives.

Leave a reply

I used the VS Code tool, installed the vetur plug-in, and the error was reported as follows

 

 

[eslint-plugin-vue] [vue/require-v-for-key] Elements in iteration expect to have’v-bind:key’ directives.eslint-plugin-vue

In the Vue version, when using v-for in a component, the key is necessary.

Solution: 

 

In File -> Preferences -> Settings -> Enter in the search box: vetur.validation.template-“Find vetur.validation.template: true-“

Reset vetur.validation.template: true to false in the right frame and it is ok.

If there is no code for this game, add a sentence: “vetur.validation.template”: false

Solve the VUE startup problem (You may use special comments to disable some warnings)

Leave a reply

Run: “npm run dev” reports an
error: As shown in the figure below, “”You may use special comments to disable some warnings.”
Reason: Eslint’s detection mechanism.

 

 

There are two solutions
Method 1:
is to comment out the 43rd line of code in the build/webpack.base.conf.js file, as shown in the figure below, and then restart npm run dev

 

 

Method 2:
Change the value true of useEslint in line 26 of the config/index.js file to false, as shown in the figure below, and then restart npm run dev

Error reported with decorator in vue: Parsing error: Decorators cannot be used to decorate object literal properties

Error message: error: parsing error: decorators cannot be used to decorate object literal properties

solution:
Add legacydecorators: true to the. Eslintrc.js file to support decorator writing

parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures:{
      legacyDecorators: true
    }
  },

If you still report an error after modifying the file, just run it under NPM install in the project directory