current position:Home>Pit of element stepped in Vue project

Pit of element stepped in Vue project

2021-08-25 20:13:49 Active learning Xiaoqiang

Preface : Under the current social background , People's needs are more personalized , Before, in order to liberate the complex native development state , The existing component library is far from meeting people's high-quality needs , In the past two days, developers have found some element UI Interactive defects , Of course, it is also some details that are easy to be careless , I hope I can help you

1.element Message Message tip

1. In the project Message References to components

// All components are introduced into the component library, which is easy to use 
import ElementUI from "element-ui";
// Introduce on demand , The advantage is that the code is small 
import { Message } from "element-ui";

// Global mount , Convenient this quote 
Vue.prototype.$message = Message;

2.Message Problems with components

The page runtime code reports an error :

 screenshots 2021-08-22  In the morning 10.58.20.png

 screenshots 2021-08-22  In the morning 11.01.28.png

element Component source code error location
 screenshots 2021-08-22  In the morning 10.59.30.png

3. You can probably see the problem here

Click to view the error location of your code , You can basically see the reason for the error report
 screenshots 2021-08-22  In the morning 11.04.21.png

Basic research summary :Message Components can not be invoked when they are in use. null and undefined

In general, the location and causes of this problem : Maybe you can pay more attention axios perhaps fetch The local reference of the returned result of the request , If there is Message Component exception prompt settings , However, the data returned by the backend is missing fields , Then there will be “undefined” The above error report .

a. Official code logic :

<el-menu :default-active="baseroute" class="vertical" @select="menuclick" :router="menurouter">

   <el-menu-item :index="items.router" v-for="items in menu" :key="items.id">
     <span slot="title">{{items.label}}</span>
   </el-menu-item>
</el-menu>

b. Official API:

 screenshots 2021-08-22  In the morning 11.22.25.png

There's no problem with this component. It's perfect , The use is also very smooth , But the problem is :router="true" In this configuration , Did you find that this configuration item can't transfer parameters ,

c. Of course, we need to study and solve problems :( Preliminary solution )

watch: {
 "$route.path": function(newVal) {
    //menu Is an array of menus 
    this.menu.forEach(item=>{
      if(newVal==item.router){
         this.$router.push({path:newVal ,query:{...this.routermsg}})
      }
    })
  },
},

e. In this case, code compatibility is improved later NavMenu Function of navigation menu parameter transmission ,

 screenshots 2021-08-22  In the morning 11.40.04.png

<script>
methods: {
   menuclick(index,indexPath){
     this.baseroute=index
     this.$router.push({path:indexPath[0] ,query:{...this.routermsg}})
   }
}
</script>

Compatible with parameter transfer function , that watch Monitoring is not needed , You can comment or delete

copyright notice
author[Active learning Xiaoqiang],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825201320687r.html

Random recommended