Shulou(Shulou.com)05/31 Report--

Today, I would like to share with you how vue transmits and receives arrays across pages and assigns values. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

Pass and receive arrays across pages and assign values

To better understand, take your own project as an example and attach the dynamic effect, you can see that the row selected by the first row of data is assigned to another interface: in order to better understand, use it and introduce the names of each of my interface and method properties to you:

Brother interface jump: question-edit-- > add-question

1. Interface A:question-edit

If you want to assign the data of this row to the past, because it is not one, you need to use arrays, and package them, first of all, our entry is on the edit icon of the operation.

1. Edit the icon code:

The addQuestion in the click event is a self-defined interface jump method. After confirming that the data carried by the bank is added to the template slot, add (scope.row) in the jump method.

two。 Method addQuestion

AddQuestion (row) {this.carryCurrentRowCode = row; this.$router.push ({path: "add-question", / / query: this.carryCurrentRowCode query: {carryCurrentRowCode: this.carryCurrentRowCode}});}

The realization of the jump function is mainly the role of path: "add-question".

Details of the interface jump can be found in the article: https://www.yisu.com/article/245670.htm

Note: the line of the comment cannot be implemented, use the one with parentheses below.

Below carryCurrentRowCode: this.carryCurrentRowCode

The front is the receiving array used in the receiving interface. I have named them the same here, but they can be different before and after.

3.carryCurrentRowCod is a defined array

Export default {data () {return {/ / Click to edit the parameter array with the current line carryCurrentRowCode: {questionTypeId: ", serial:", questionClassifyId: "" QuestionContent: ", degreeInitial:"},}

The parentheses in the array are the data of the component with. Add the data you want to carry in parentheses.

two。 Interface B:add-question

1. Take the passed array

Export default {data () {return {/ / passed array carryCurrentRowCode: {}}

two。 Because the array is displayed as soon as it is loaded in the interface, both the passed array method and the assignment to the corresponding component need to unload the hook function.

Created () {/ / received the carryCurrentRowCode array this.carryCurrentRowCode = this.$route.query.carryCurrentRowCode;} from the question-edit interface

3. The passed array is obtained. Assign a value to the component to give an example: take the test number as an example: serial: "

/ / examination question number this.i_number = this.carryCurrentRowCode.serial

Also write the assignment to the hook function.

Explain i_number

Is the component el-input test question number vMuyModele = "i_number"

Note:

If it is not the naming of the brother receiving interface, you can reduce the component assignment step, which is directly equal to the receiving array point serial in the v-model of the component.

Array assignment tread on the pit

Recently, you need to complete the dynamic assignment array operation in Vue. After getting the data from the server, refresh the data in the array, but find that no matter what method is used. By typing log, it is found that the data cannot be executed downwards here, and no exceptions are reported. Finally, the problem is solved. Make a record here.

Array assignments in Vue are still different from those in normal JS.

The following actions can cause the interface to refresh: push,pop, unshift,shift,reverse,sort,splice

The following actions do not cause interface refresh: slice,concat, filter

There is one more thing to note:

It is impossible to refresh the interface by directly assigning values or changing the length.

(1) set items directly through the index.

(2) modify the array length, mylist.length=3

Second, after getting the data from the server, you need to pay attention to one problem: the change of the principal object.

For example, after initiating a request using the axios object, you should pay attention to the processing of data in the return method:

Note that the this object cannot be used when calling the object in the then method of axios, because the this object refers to the axios instance, so the data data in the vue instance cannot be obtained through this. You must use a value to point to the vue instance object outside. It is correct to assign the value through this external object.

Var self;created:function () {self = this;}, mouted:function () {axios.create ({baseURL: 'url', timeout: 10000, headers: {' Content-Type': 'application/json'}}) .get (' xxxxxxxxxx') .then (function (response) {if (response.data.dataList.length > 0) {var datalist = response.data.dataList) For (var iTuno Bandi)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.