Solution to Vue data assignment problem

Let me summarize a problem that I have encountered for a long time.

In the project, the background data is needed to render the front end. Axios integrated with Vue is used. The hook function in Vue is used to send a get request to the background after the page component is mounted, and then the returned data is assigned to the attributes defined in data():

After execution, the front end reports an error:

reason:

After the request is successfully executed, the contents of the callback function are executed. The callback function is inside other functions and this is not bound to any object and is undefined.

Solution:

1) Assign this pointing to the Vue object to the property defined by the external method, and then use the property in the internal method

2) Using arrow functions

Supplement: Solve the undefined problem of calling between data in vue data

Solution:

There is no solution, it cannot be called like this at all.

Although this in the data function points to VueComponent (understanding: the data in data can use this to call the data in props), when calling another attribute in data, the data in data has not been parsed yet, because when returning the {} object, all the data in them are rendered and parsed together, so the undefined problem will occur.

(The above is just my personal understanding. If there are any errors, please comment and correct them.)

So choose to complete the assignment operation in the mounted life cycle

export default {
 data(){
  return {
  firstName:'111',
  lastName:'222',
  fullName:''
  }
 },
 mounted(){
 this.fullName = this.firstName + '' + this.lastName;
 } 
 }

Display results:

Of course, if fullName does not need to be defined in data, it may be elegant to define it in the computed property.

The above is my personal experience. I hope it can give you a reference. I also hope that you will support 123WORDPRESS.COM. If there are any mistakes or incomplete considerations, please feel free to correct me.