Tag Archives: Vue error

[Solved] Vue Error: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

The cause of the error, I guess, is mostly a version problem

Add the following code to router/index.JS

const originalPush = VueRouter.prototype.push

VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

As follows:

So far, the problem is solved

Vue Error: [Vue warn]: Error compiling template:Templates should only be responsible for mapping…

Error message:

[Vue warn]: Error compiling template:Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Analysis:

Template compilation error: The template is used as a response to the mapping UI interface. It is forbidden to place side-effect tags in the template, such as <script>, because they will not be parsed.

The summary is that <script> cannot be placed in a template file. But it can actually be placed in a template file.

Solve:

In fact, the <script> tag cannot be included in the <div> tag.

As follows,
image

Under the PyCharm smart labeling error, I found the error, and I lost a </div> tag in my source code.
But the browser mentally added the missing </div> tag before the </body> tag and after the </script> tag. As a result, such a warning occurred. Since a page is a div, this is why the console displays the entire body part of the page.

[Solved] Vue error: Property or method “toJSON” is not defined on the instance but referenced during render.

There is a little pit. Note that you cannot use console.log on root instantiation. If you open vconsole, an error will be reported! ! !
      1 Open vconsole and report toJSON is defiend. The positioning problem is in the console.log() and it will not report an error.
      2 If you need to output this thing, please find a place to define it toJSON(){} Although there is no error, I don’t know if there is any problem.
      3 Do not open vconsole without this bug
      4 Comment out when not needed
The reason for the problem is explained on the official website as Vue does not allow dynamic addition of root-level responsive attributes, so you must initialize the Vue instance by pre-declaring all root-level responsive data attributes, even if the value is empty:

[Solved] Vue error: (Avoid using non-primitive value as key, use stringnumber value instead.)

Avoid using non-primitive values ​​as keywords, and use string/numeric values ​​instead.
Solution:

<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
  <el-carousel-item v-for="item in photoList" :key="item">
    <div class="swiper-slide">
      <div class="swiper" v-for="index in item">
       <a @click='goTo(2)' ><img  :src="index" /></a>
      </div>
    </div>
  </el-carousel-item>
</el-carousel>

In the for loop, the bound key value cannot be an object, but a string or value, as shown in the following figure:

<el-carousel class="swiper-container" :interval="5000" arrow="hover" @change="carouselItem">
  <el-carousel-item v-for="item in photoList" :key="item.id">
    <div class="swiper-slide">
      <div class="swiper" v-for="index in item">
       <a @click='goTo(2)' ><img  :src="index" /></a>
      </div>
    </div>
  </el-carousel-item>
</el-carousel>

How to Solve Nuxt startup error: <--- Last few GCs --->

Error content

    <--- Last few GCs --->

    [19572:000001F6D0A888C0]  2084451 ms: Mark-sweep 2001.3 (2054.1) -> 1995.6 (2053.7) MB, 61.1 / 0.0 ms  (average mu = 0.173, current mu = 0.145) allocation failure scavenge might not succeed
    [19572:000001F6D0A888C0]  2084524 ms: Mark-sweep 1997.2 (2053.9) -> 1995.4 (2053.9) MB, 64.6 / 0.0 ms  (average mu = 0.146, current mu = 0.116) allocation failure scavenge might not succeed


    <--- JS stacktrace --->

    ==== JS stack trace =========================================

cause

node v8 storage overflow

Solution

Original package.json configuration

"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"

Modify startup items

"dev": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js dev",
"build": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js build",
"start": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js start",
"generate": "node --max-old-space-size=4096 node_modules/nuxt/bin/nuxt.js generate"

[Solved] VUE Error: Component template should contain exactly one root element. If you are using v-if on mu…

Failed to compile.

./node_modules/vue-loader/lib/template-compiler?{“id”:”data-v-59926570″,”hasScoped”:true,”transformToRequire”:{“video”:[“src”,”poster”],”source”:”src”,”img”:”src”,”image”:”xlink:href”},”buble”:{“transforms”:{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/page/home/Home.vue (Emitted value instead of an instance of Error)

Error compiling template:

<div><el-header class=”animated faedOutUp”><myHeader></myHeader></el-header></div> <div>Home</div>

– Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

@ ./src/page/home/Home.vue 11:0-366

@ ./src/router/index.js

@ ./src/main.js

@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

 

Error Codes:

<template>
  <div><el-header class="animated faedOutUp"><myHeader></myHeader></el-header></div>
  <div>Home</div>
</template>

It is revised as follows

<template>
  <div>
    <el-header class="animated faedOutUp"><myHeader></myHeader></el-header>
    <div>Home</div>
  </div>
</template>

Save run, error solved

Vue Uncaught (in promise) Error: Request failed with status code 404

Today, after adding a new page, no data can be found on the home page. Error: request failed with status code 404

I didn’t get the data from the background. At the beginning, I thought it was a problem with the background control layer. I searched for it for a long time

Finally, we found that the proxy proxy was not configured in APP/config/index.js, and the request was not routed from nodejs to Tomcat

So with the configuration, the data is found successfully