SoFunction
Updated on 2025-04-11

The solution steps to real-time synchronization of vue data variables after being assigned to each other

This is the data structure

data() {
   return {
    title: 'The problem of real-time synchronization after the web front-end this data variable is assigned to each other',
    val_1: 'vue',
    val_2: ''
   }
}

Source of the problem:

We assign val_1 to val_2 in onload() (or this problem will also occur when the user clicks)

onload() {
 this.val_2 = this.val_1;
}

Solution:

We are using JavaScript to convert "val_1" into a string type, and then assign it to "val_2" to solve the problem.

onload() {
 this.val_2 = ((this.val_1));
}

Supplementary knowledge:vue defined global variables are empty in another method after one method is assigned

In the process of learning vue, I found many small problems, such as: I defined a global variable a. In order to get the global variable in the method defined below, I added a jquery click method to the method, using = b (a custom variable); and then went to another method to use the global variable a. I found that there was no assignment at all, and it was still the value of the original global variable.

The reasons are as follows:Because the click function changes the direction of this. So you need to add a sentence outside the click function:

var self = this;

Then, assign values ​​to global variables in the click function:

= b;

This will not change the direction of this!

The above solution to the real-time synchronization of vue data variables after being assigned to each other is all the content I share with you. I hope you can give you a reference and I hope you can support me more.