Tag Archives: vue

[Solved] Vue route jump error: Uncaught TypeError: Cannot read property ‘push’ of undefined

Vue route jump:

setTimeout(function () {
console.log(this);
this.$router.push("/login");
},800)

The syntax is OK, but an error is reported:

MyFollow.vue?c93c:119 Uncaught TypeError: Cannot read property 'push' of undefined

At this time, it means that the direction of this is different. You should print this and have a look
it is found that this in the setTimeout function points not to the Vue object but to the window. It can be solved by changing the arrow function

The function settimeout will change this to point to the global window, if it does not change this to point to the global window, use the arrow function here
setTimeout(()=>{
this.$router.push("/login");
},100)

These dependencies were not found:

An error is reported when NPM run dev is started:

 

 

The file with the problem written on it is in./SRC/router/index. JS; Found yes after searching

import Content from '@page/content'

 

This code is wrong. You need to add “/” in front of the page. The correct code is

import Content from '@/page/content'

Re execution of code found or error

 

 

 




					

		
		
	


	

	

				

			
						

				Vue solves the problem of space and blank line error reporting
			

								


				

			


Go to the webpack.base.conf.js file under the build folder




Then open the file, find the code under the figure and comment it out




After the comments are removed, when writing the page, the error will not be reported if the space is not standardized


Some versions of the webpack.base.conf.js file will write the space detection in a function as shown in the figure below, and then call it in the module. In this case, just comment out the line of code called:




   Note this line as shown in the figure


   


  





					

		
		
	


	

				

			
						

				Monitoring of front-end error reporting based on Vue project
			

								


				

			


Recently, we need to monitor a Vue project to monitor the exceptions in the formal environment in real time, and quickly respond to and modify bugs. In fact, errors reported by Vue project are mainly collected from the following three methods


1.


window.addEventListener(‘unhandledrejection’,   event  =>  { 


   event.promise.catch((e)  =>  { 


     utils.errorCatch(e,   3) 


  }) 


}) 


  


two


 


window.onerror  =  function  ( errorMessage,   scriptURI,   lineNo,   columnNo,   error)  { 


  //  Record stack information


   if  ( error)  { 


     error.url  =  error.stack 


  } 


   utils.errorCatch(error,   4) 


} 


  


three


Vue.config.errorHandler  =  function  ( err,   vm,   info)  {


     if  ( err)  { 


       err.url  =  err.stack 


    } 


     utils.errorCatch(err,   5) //    Send a request to the backend for saving


  } 


  


Using the above three methods, you can capture and collect most JS errors, and then display them as a list for filtering as follows:


 


  


  


 


  


  





					

		
		
	


	

				

			
						

				[Solved] Vue:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘
			
								

				

			


problem found


Run a previous Vue+webpack vue imitation news website small project, report an error


Because I didn’t study Vue deeply, I always reported this error, and it took a long time (to be exact a whole afternoon ^…^) to find the reason -v-


Uncaught TypeError: Cannot assign to read only property ‘ exports ‘ of object ‘ #<Object> ‘




Click on the wrong file and mark the wrong place as a piece of code:






1 import {normalTime} from  ' ./timeFormat ' ;
 2 module.exports = {
 3  　　normalTime
 4 };




Is  module.exports;


Solution


Search with Google, and various searches on forums:


The reasons are as follows:


The code above is ok. You can mix require and export. You can’t mix import and module.exports.


The translation means that there is nothing wrong with the code. When webpack is packaged, you can mix require and export in the js file. But import and module.exports cannot be mixed


Because import and module.exports are not allowed to be mixed in webpack 2  ,


The solution is to change it to ES6.






1 import {normalTime} from  ' ./timeFormat ' ;
 2 export default normalTime;




Run again:




 


to sum up


The above is the whole content of this article. I hope that the content of this article can bring some help to your study or work. If you have any questions, you can leave a message and exchange. Thank you for your support to Script Home.



					

		
		
	

	

				

			
						

				[Solved] (6) Axios error reporting, cannot read property ‘protocol’ of undefined
			

								


				

			
After NPM run build package is run in the project built by Vue cli, an error is reported


Cannot read property 'protocol' of undefined




Locate the error in the router file. From the cause of routing, the problem appears in the Axios application mode. Because Vue resource was used before, its usage mode is as follows:


/*Introducing the Resource Request plugin*/
import Resource from 'vue-resource'

/*Using the VueResource plugin*/
Vue.use(Resource)


However, when I change it to Axios, according to his way, although the local runtime is OK, the above errors will appear after packaging. The correct way should be




After introducing the Axios plug-in, assign it to Vue. Prototype. $HTTP, and use the VM. $http. Get () method directly

					

		
		
	


	

				

			
						

				[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



					

		
		
	


	

				

			
						

				Front end development: solve the problem of emitted value instead of an instance of error in Vue project
			

								


				

			


Website content quality is poor, distribution efficiency is too low how to do?Huawei engineers offer 5 unique skills>>> 




Share a classic error that developers who have just come into contact with front-end development often encounter, that is, the problem of “emitted value instead of an instance of error” in the running of Vue project, with the method and principle to solve the problem.






Repeat error prompt:






(Emitted value instead of an instance of Error) < van-cell v-for=” item in this.todoList”>:  component lists rendered with v-for should have explicit keys. See  https://vuejs.org/guide/list.html#key  for more info. 










Due to the above warning, the Vue project cannot be started. The general meaning of the warning is to use V-for in the component, but the key is not set, which will cause non uniqueness problems.






The solutions to the above problems are as follows






In the warning component, an attribute key is added after V-for to bind a key to the element. V-for = (item, index) in this.todolist “: key =” index “operation, that is:






            <van-cell              v-for="(item, index) in this.todoList" :key="index"               :to="{ name: 'Approval/Detail', params: { id: item.businessId } }"            >              <van-icon name="bell" size="30" />              <div class="info-right">                <p class="user-info">{{ item.startBy }}</p>                <p class="place">{{ item.processInstanceName }}</p>              </div>            </van-cell>








The above operation avoids the problem of emitted value instead of an instance of error.


 






Principle of use:






When using V-for for list rendering, the virtual DOM is different from the actual Dom and cannot be unique. Binding a key to an element can ensure the uniqueness operation, which is also the official recommendation of Vue.






 






The above is the whole content of this chapter. Welcome to the WeChat official account of the three shopkeeper, “iOS development by three shopkeeper”, three shopkeeper’s Sina micro-blog “three shopkeeper 666”, welcome to pay attention!






Three WeChat’s official account:










Sina Weibo of three shopkeepers:








 




 this article is shared by WeChat official account – iOS development by three shopkeeper (sanzhanggui777).



					

		
		
	


	

				

			
						

				[Solved] VUE npm run devevents.js:160 throw er; // Unhandled ‘error’ event listen EADDRIN…
			

								


				

			
The error is as follows:




Cause of error:


Listen eadrinuse: 8002 means that the current 8002 port is occupied


Solution:


1: Simple and rude: turn off the relevant programs that may be affected and restart them


2


1. Win + R, CMD query whether the port number used is occupied:


Input command: netstat – aon|findstr “8002”


Press enter to display the PID number of the program corresponding to port 8080; As shown in the figure below:




2. Find the corresponding program according to the PID number:


Input command: tasklist | findstr “12452”


Press enter to display the program that occupies the port, as shown in the following figure:




3. Press the shortcut key “Ctrl + Shift + ESC” to call up the Windows Task Manager, and end the program process according to the corresponding name of PID/program. As shown in the figure below: