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

This article introduces the relevant knowledge of "what is the code for Vue to achieve shuttle box function". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Vue-implements the shuttle box function, as shown in the following figure:

Css

.transfer {display: flex; justify-content: center; align-items: center;} .transfer > .list {width: 200px; height: 300px; border: 1px solid # 000; list-style: none;} .content {font-size: 30px; margin: 020px;} .list > li {padding: 5px; box-sizing: border-box;}

HTML

{{item.name}} >

{/ / execute the data whose select is true if (item.select) {that.info = that.info.concat (item). Sort ((return a.id b) = > {return a.id-b.id}); / / add to the new data box, sort delete info [index]; / / delete the data item.select = false }}) info = info.filter (function (val) {return val}); / / filter undefined that.new_info = info; / / update the original data},}, mounted () {let that = this / / add a select field to the original data to determine whether to select that.info.map ((val,key) = > {that.$set (val,'select',false)});}

* * *

There is a problem using splice to delete data here this.info.splice (index,1); when multiple elements are selected, you will find that only some of the elements have been deleted, while some of the selected elements still exist because of the change in the index of the array when an element is deleted, resulting in a program exception. So I use delete to clear the data, and then filter to filter the undefined. The general idea is to add a select field to the data, bind it with the checked of multi-checkboxes, and when the field is click, only execute the data whose select is true, add it to the new data box, and then delete the original one.

This is the end of the content of "what is the code for Vue to implement the shuttle box function". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.