It can solve the problems of Vue’s non sequential execution method, tree table’s automatic refresh after modifying sub data, etc

Time:2021-1-27

Aiming at the problems encountered in Vue development

Vue is a powerful front-end framework developed by Chinese people
The high-density integration with elementui also brings great benefits to the back-end staff
Small make up this not to also start to study, but although study is simple, start to operate that but everywhere big pit
Today, I’m going to talk about the integration of Vue and elementui

Tai Keng Yi

After Vue refreshes the page, the navigation bar is reset
  • As we all know, the navigation bar component of elementui will have a default selected label. We can switch labels by clicking the mouse. However, every time we refresh the page during development, the labels that we have already clicked are reset, but the displayed page is still the page that jumped after the label was selected last time. You can see the figure first:

    • When no label is selected, the home page (code) will be displayed by default:

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
    • When no label is selected, the home page will be displayed by default (effect)

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • But at this time, if you click other tags, such as hehe, you will find that the tab is reset to the home page after refreshing

    • After clicking hehe

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
    • Click hehe to refresh

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • Error analysis: because the default value of the tab is selected in the Vue instance, the bound value is unchanged, so after each refresh, the modified value will be rendered to the tab again, and then the refresh and reset effect will appear. You can guess, just change the modified value to dynamic acquisition
  • Solution: change the value bound to the tag directly in the Vue instance to this$ route.path This value represents to obtain the current routing address, that is, the value of index of each tab. After setting, let’s see the effect:

    • Set code

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
    • PS: in this way, the value of the index attribute of the tag must be the correct routing path

Tai Keng er

The data of elementui’s trellis table will refresh automatically after modification
  • I believe you often use the tree form in elementui. The sub data contained in it is very intuitive when displaying categories. However, Xiaobian still finds a small hole in its use. That is, after deleting or modifying a sub data with Axios, the sub data will not automatically render to the page. The figure is as follows:

    • Tree form Tai Lam:

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
    • code

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • After testing, it is found that this drop-down arrow will only enter the code of sub loading when the first click on the current page, so the sub data is modified at this time. Even if you click the drop-down arrow again, the sub data will not be updated. You can also test the effect yourself
  • Solution:

    //You can re query and execute the following code after modifying
    this.$set(
        this.$refs.myTable.store.states.lazyTreeNodeMap, 
        parentId, 
        list);    
     //Parameter one is dead
     //Parameter 2 represents the need to follow the new parent data ID value
     //PS: it doesn't have to be ID. confirm it according to the bound value of row key = "Id" in the table
     //The updated data of parameter 3 is the data after modification and re query

Dakeng three

How to transfer parameters when Axios sends post request in Vue
  • As we all know, the parameter transfer method of post request is to use the method carried by the request body to transfer parameters. When the parameters are transferred by post, the front-end data format is JSON, and the back-end is Java. Therefore, in the case of separating the front-end and back-end of Vue, the back-end parameters will not be received
  • Case 1:

    • The JSON format passed by the front end is in the form of object

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • Solution:

    • Add @ requestbody annotation to the parameter position of the method corresponding to the springboot controller

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • Case 2:

    • The JSON format passed by the front end is the JSON of key value pair
  • Solution 1:

    • Using the QS component of Vue to splice parameters into key value pairs, PS: QS needs to be downloaded separately

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
  • Solution 2:

    • Using the built-in object urlsearchparams of JS to splice a standard parameter in the form of key value pair

      • It can solve the problems of Vue's non sequential execution method, tree table's automatic refresh after modifying sub data, etc
    • PS: this method is not compatible with browsers, so it is not good

Dakeng four

The problem of non sequential execution of code in Vue method
  • Since Vue uses Axios to send asynchronous requests, it will not wait for the completion of asynchronous requests after code execution encounters asynchronous requests. At this time, if the following code needs to use the return result of asynchronous requests, then the problem arises:

    • Using the tree table example above, when we modify, we need to send an asynchronous request to the background to query the latest data, and then execute the Vue update data method. At this time, the test shows that the Vue update data method will be executed first, then the data is not the latest data, which will lead to rendering failure
    //Delete a level
    handleDelete(index, row) {
        //Deleted post request
        1  this.$http.post("url", parem).then((res) => {
            _this.mesg(res);
        });
        //Re query data method to assign data to this.parentData
        2  this.findByLevel();
        3  console.log(this.parentData);
        //Update subset data
        4  his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
    },
    //Check the page effect and find that the table grid data is not updated, but the DB updates the data correctly
    //After testing, it is found that the latest data in the third step is not the latest data of DB, which is more confused and forces Mingming to follow the new data
  • We might as well guess whether the method of updating data in the second step does not wait for the first step or the fourth step does not wait for the second step? With this problem, I finally found that my guess was correct and found a better example website to post to youUsing async function
  • Solution:

    //Labeling async functions on Methods
    async handleDelete(index, row) {
        //Mark await before the call of an asynchronous request that must wait
        await this.$http.post("url", parem).then((res) => {
            //PS: if an asynchronous request is included in the asynchronous request, even if async and await are also used in the internal request, it is also invalid and will not wait for the execution of this method
            _this.mesg(res);
        });
        //Also mark await
        await this.findByLevel();
        console.log(this.parentData);
        
        his.$set(this.$refs.myTable.store.states.lazyTreeNodeMap, row.parentId, this.parentData);
        },
Write it at the back

That’s all for today’s discussion of the pits found in the use of Vue
In the future, if you encounter advanced pit, you will still update the article
Please pay more attention to it. If you have any questions, please leave a message at any time

Consciously respect the people’s labor achievements, please note!!!

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]