Shulou(Shulou.com)06/02 Report--

This article mainly introduces vue how to achieve the secondary linkage effect of the drop-down box, the article introduces in great detail, has a certain reference value, interested friends must read it!

1. Realize the effect

2. The data format returned by the backend is "list": [{"id": "1178214681118568449", "title": "backend development", "children": [{"id": "1178214681139539969", "title": "Java"}, {"id": "1178585108407984130" "title": "Python"}, {"id": "1454645056483913730", "title": "C++"}, {"id": "1454645056731377666", "title": "C #"}}, {"id": "1178214681181483010" "title": "Front-end development", "children": [{"id": "1178214681210843137", "title": "JavaScript"}, {"id": "1178585108454121473", "title": "HTML/CSS"}]} {"id": "1178214681231814658", "title": "Cloud Computing", "children": [{"id": "1178214681252786178", "title": "Docker"}, {"id": "1178214681294729217" "title": "Linux"}}, {"id": "1178214681324089345", "title": "system / operation and maintenance", "children": [{"id": "1178214681353449473", "title": "Linux"} {"id": "1178214681382809602", "title": "Windows"}}, {"id": "1178214681399586817", "title": "Database", "children": [{"id": "1178214681428946945" "title": "MySQL"}, {"id": "1178214681454112770", "title": "MongoDB"}]}, {"id": "1178214681483472898", "title": "big data" "children": [{"id": "1178214681504444418", "title": "Hadoop"}, {"id": "1178214681529610242", "title": "Spark"}]}, {"id": "1178214681554776066" "title": "artificial intelligence", "children": [{"id": "1178214681584136193", "title": "Python"}]}, {"id": "1178214681613496321", "title": "programming language" "children": [{"id": "1178214681626079234", "title": "Java"}]}]

The data format is not necessarily the same as the above, my last article is to use this data format on the tree control, here on the two-stage linkage.

3. Whether the import course from'@ / api/edu/course'import subject from'@ / api/edu/subject'export default {data () {return {saveBtnDisabled: false, / / Save button on the vue page disables courseInfo: {title:'', subjectId:'' / / second-level category id subjectParentId:'', / / first-level category id teacherId:'', / / lecturer id lessonNum: 0, / / course description:'', / / course introduction cover:'/ static/01.jpg', / / default cover image price: 0}, teacherList: [] / / encapsulate all instructor data subjectOneList: [], / / first-level classification subjectTwoList: [], / / second-level classification BASE_API: process.env.BASE_API / / interface API address}}, created () {/ / perform / / initialize all instructor this.getListTeacher () / / initialize first-level classification this.getOneSubject ()} before page rendering Methods: {/ / Click on a level 1 category The change event will be triggered, showing that the corresponding second-level category subjectLevelOneChanged (value) {/ / value is the id value of the first-level category / / first traversing all categories including the first-and second-level for (var I = 0) I {this.subjectOneList=response.data.list})}

The main idea is that when a click event occurs in the first-level drop-down box, we get the id value of the first-level drop-down box (here you are not necessarily the id value), and then traverse the first-level classification collection that contains all the data. find the object that is equal to the first-level classification id value selected by the current click event Then assign its children attribute (my children is a collection of secondary classifications at the back end) to the secondary taxonomy array object subjectTwoList in the data attribute.

Here, the back end fetches all the data at once, and I traverse it at the front end. Of course, you can also modify the execution logic of the click event, and another way is to click the selected key and the key of the drop-down box to check all the secondary categories at the back end, and then assign the secondary classification to the second drop-down box, but this efficiency feels a bit slow, although this is also an implementation.

These are all the contents of the article "how to achieve the secondary linkage effect of the drop-down box in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.