This is the 7th day of my participation in the August Text Challenge.More challenges in August

Preface: In this big social background, the people demand more personalized, and for the liberation of the development of complex native development status, existing component library has far cannot satisfy the needs of people with high quality, these two days development element found some defects on the UI interactions, details of course is also easy to careless omissions, I hope I can help you

1. Element Message

1. Reference to the Message component in the project

Import ElementUI from "element-ui"; Import {Message} from "element-ui"; import {Message} from "element-ui"; Prototype.$message = message;Copy the code

2.Message component problems

Page runtime code error:

Element component source code error location

3. You can probably see the problem here

Click to view the error location of your code, basically you can see the reason for the error

The Message component cannot call null and undefined input arguments during use

It is probably worth paying more attention to the reference in the axios or fetch request where the result is returned. If there is an exception set in the Message component, but the data returned by the back end is missing a field, the error above “undefined” will be generated.

2. Element NavMenu

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>
Copy the code

B. Official API:

The component looks perfect and works fine, but the problem is there:router="true"In this configuration, did you notice that this configuration item cannot be passed as an parameter,

C. of course, we need to study and solve problems :(preliminary solutions)

watch: { "$route.path": ForEach (item=>{if(newVal==item.router){this.$router. Push ({path:newVal) ,query:{... this.routermsg}}) } }) }, },Copy the code

d.When you click the current highlighted menu (one menu is clicked twice), watch cannot listen (the route is not changed), and the component will use the index defined by the router as the path to jump to the route. In other words, the page will report various errors and parameter errors without the function of route parameter transmission

E. In this case, the following improved code is compatible with NavMenu navigation menu parameter transfer function,

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

If the parameter transfer function is compatible, the watch listener is not needed, and can be annotated or deleted