How to realize the two-way linkage effect of drop-down box by Vue

Today, the editor will share with you the relevant knowledge points about how Vue can achieve the two-way linkage effect of the drop-down box. 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. Let's take a look.

I. Preface

When developing front-end pages, you often need to write down the drop-down box. Common drop-down boxes include drop-down boxes with fixed values written on the page, and a list of values obtained by calling the background interface service. Whether it is the original jsp page, html page, etc., or the popular vue angluar.js page, the logic is the same. This article explains how to achieve two-way linkage effect with multiple drop-down boxes in the VUE page.

Second, code examples

2.1 in the vue page, {if (response.data & & response.status = = 200) {this.ListA= [] var result = response.data.data.XX let jsonObj = JSON.parse (result) For (let k of Object.keys (jsonObj)) {this.ListA.push ({label: K, value: jsonObj [k]. Attribute A,})})} GetBMethod (temp) {XXAPI.getDicValue2 (temp). Then (response = > {if (response.data & & response.status = = 200) {this.ListB = [] var result = response.data.data.XX let jsonObj = JSON.parse (result) For (let k of Object.keys (jsonObj)) {this.ListB. Push ({label: K, value: jsonObj [k]. Attribute B,})}

The above steps only complete the basic framework construction, that is, the backend and front-end data collection loading and interface service calls to obtain the data collection and so on.

2.4 to achieve linkage, as we all know, in the vue page, you want to achieve multiple