左邊的選項(xiàng)點(diǎn)擊添加添加到右邊，點(diǎn)擊移除從數(shù)組去除，可是很多BUG,應(yīng)該怎么寫？

按照回答給出的意見做出來修改。。。還是出現(xiàn)了BUG，比如說多選沒辦法同時(shí)加過去另外一邊。

附上代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="query.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .box1,.box2{
    width:200px;
    height:300px;
    border: 1px solid darkgray;
    float: left;
    overflow-y:scroll;
    }
  .box3{
     width:100px;
    height:300px;
    text-align: center;
    float: left;
    padding-left:20px;
  }
  .content{
    overflow: hidden;
    width:550px;
  }
    button{
      float: left;
      width:80px;
      text-align: center;
      margin: 5px auto;
    }
    .current{
      background: pink;
      color:#fff;
    }
    .item{
      display: block;
    }
    .btnbox{
      overflow: hidden;
      text-align: center;
      margin-top: 7px;
      padding-left:230px;
    }
   
</style>
<body>


<div id="app">
  <div class="content">
      <div class="box1">
          <label class="item"  v-for="i in todo">
              <input type="checkbox" v-bind:id="i.id" v-model="i.isCheck"/>{{i.item}} 
          </label>  
      </div>
      <div class="box3">
        <button v-on:click="add">新增</button><br>
        <button v-on:click="delect">移除</button><br>
         <button v-on:click="addall">addall</button>  
         <button v-on:click="delectall">delectll</button>
      </div>
      <div class="box2">
           <label class="item"  v-for="i in undo">
               <input type="checkbox" v-bind:id="i.id" v-model="i.isCheck"/>{{i.item}} 
           </label>
    </div>
  </div>  
    <div class="btnbox">
      <button >確認(rèn)</button>
    </div>
<script>
var app = new Vue({
      el: '#app',
      data: {
        todo:[{item:1234,id:"1"},{item:12345,id:"2"},{item:123456,id:"3",}],
        undo:[{item:2,id:"6"},{item:3,id:"4"},{item:4,id:"5"}],
    },
      methods: {
        add:function(){
          for (var i = 0; i < this.todo.length; i++){
            /*每新增一個(gè)就刪除待選區(qū)數(shù)據(jù)*/
            if(this.todo[i].isCheck == true){
                this.todo[i].isCheck = false;
                this.undo.push(this.todo[i]);
                this.todo.splice(i,1)
            }
          };
        },
        delect:function(){
              for (var i = 0; i < this.undo.length; i++){
                if(this.undo[i].isCheck == true){
                    this.todo.push(this.undo[i]);
                      this.undo.splice(i,1);
                }
              };
            },
        addall:function(){
            /*深拷貝todo數(shù)組，加入undo數(shù)組*/

            var temp = this.todo.slice(0);
            this.undo = this.undo.concat(temp);
            this.todo = [];
        },
        delectall:function(){
            /*深拷貝undo數(shù)組，加入todo數(shù)組*/
            var temp = this.undo.slice(0);
            this.todo = this.todo.concat(temp);
            this.undo = [];
        }
    }
    
})
</script>
</body>
</html>

==================================================================================

這是要求的功能，下面是我自己寫的一個(gè)，功能有很多問題；例如添加了一個(gè)之后再添加全部會(huì)多次添加；disable邏輯不太清除；正常是添加之后，左邊input的disable屬性就會(huì)禁用；可是雙向綁定連右邊的也禁用了；我分開了兩個(gè)數(shù)組了也不知道怎么解決；下面是我的代碼；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="query.js"></script>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<style>
    .box1,.box2{
    width:300px;
    height:500px;
    border: 1px solid #000;
    float: left;
    overflow-y:scroll;
    }
    button{
      float: left;
    }
    .current{
      background: pink;
      color:#fff;
    }
    .item{
      display: block;
    }
  

</style>
<body>
<div id="app">
 
  <div class="box1">
      <!-- <p  v-for="i in todo" v-bind:id="i.id" v-bind:class="{ current: isActive }"  v-on:click="openNew(i.id)"  >{{i.item}}</p> -->
      <label class="item"  v-for="i in todo"><input v-bind:disabled="i.readonly" type="checkbox" v-model="i.isCheck" v-bind:id="i.id" />{{i.item}}{{i.isCheck}}-disable:{{i.readonly}}</label>  
  </div>
  <button v-on:click="add">新增</button>
  <button v-on:click="delect">移除</button>
   <button v-on:click="addall">新增addall</button>  
 <!--   <button v-on:click="delectall">刪除delectaddall</button>   -->

  <div class="box2">
       <label class="item"  v-for="i in undo"><input v-bind:disabled="i.readonly" type="checkbox" v-model="i.isCheck" v-bind:id="i.id" type="checkbox" v-bind:id="i.id" />{{i.item}} {{i.isCheck}}-disable:{{i.readonly}}</label>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    isActive: true,
    isCheck:true,
    todo:[{item:1234,id:"1",isCheck:"",readonly:false},{item:12345,id:"2",isCheck:"",readonly:false},{item:123456,id:"3",isCheck:"",readonly:false}],
    undo:[{item:2,id:"6",isCheck:"",readonly:false},{item:3,id:"4",isCheck:"",readonly:false},{item:4,id:"5",isCheck:"",readonly:false}],
    group:[]
  },
 
  methods: {
    openNew: function (i) {
     //var item = this.todo.indexOf(i);
     // this.isActive = !this.isActive;

    },
    add:function(){
      //alert("1");
      for (var i = 0; i < this.todo.length; i++){
        //alert()
        if(this.todo[i].isCheck == true){
          console.log(i);
          this.undo.push(this.todo[i]);
          this.todo[i].isCheck = false;
          this.todo[i].readonly=true;
        }
      };
    },
    delect:function(){



      for (var i = 0; i < this.undo.length; i++){
        //alert()

        if(this.undo[i].isCheck == true){
          alert(i);
          this.undo.splice(i,1);
          this.undo[i].isCheck = true;
          this.undo[i].readonly=false;
        }
      };
    },
    addall:function(){
      //alert("1");

      for (var i = 0; i < this.todo.length; i++){
        //alert()
        
        if(this.todo[i].isCheck == false){
          //console.log(this.todo[i]);
          if(this.todo[i].id==this.undo[i].id){
            //return;
            alert("err")
          }
          //this.todo[i].isCheck = !true;
          this.undo.push(this.todo[i]);
          console.log(this.undo);
          this.todo[i].isCheck = true;
          this.todo[i].readonly= true;
        }
      }
     }
    //,
    // delectall:function(){
    //   for (var i = 0; i < this.undo.length; i++){
    //     //alert()
    //     //this.undo[i].readonly="false"
    //     if(this.undo[i].isCheck == !false){
    //       this.undo[i].isCheck = true;
    //       console.log(this.undo[i]);
    //       this.undo.splice(this.undo[i]);
    //     }

    //   };
    // }
  }
})

</script>
</body>
</html>

回答

編輯回答

忘了我

關(guān)于你說的 “正常是添加之后，左邊input的disable屬性就會(huì)禁用；可是雙向綁定連右邊的也禁用了；”這個(gè)問題，你寫的這個(gè)東西，直接把對(duì)象加進(jìn)去肯定是不對(duì)的，對(duì)象是引用，應(yīng)該這樣寫
`add: function() {

                    //alert("1");
                    for (var i = 0; i < this.todo.length; i++) {
                        //alert()
                        if (this.todo[i].isCheck == true) {
                            console.log(i);
                            var obj = {...this.todo[i]};
                            obj.isCheck = true;
                            obj.readonly = false;
                            this.undo.push(obj);

                            
                            this.todo[i].isCheck = false;
                            this.todo[i].readonly = true;



                        }
                    };
                },`
                剩下的問題沒看懂啥意思，詳細(xì)一點(diǎn)

2017年5月11日 00:07

編輯回答

枕邊人

改了一下你的數(shù)據(jù)結(jié)構(gòu)和邏輯，建議是左邊的點(diǎn)擊添加到右邊后就清除，沒必要還展示出來。
-----------------------------------------更新分割線-------------------------------------------
因?yàn)閿?shù)組邊刪邊循環(huán)的時(shí)候，索引會(huì)發(fā)生變化，所以更改一下add方法。

<body>
<div id="app">
      <div class="box1">
          <label class="item"  v-for="i in todo">
              <input type="checkbox" v-bind:id="i.id" v-model="i.isCheck"/>{{i.item}} 
          </label>  
      </div>
      <button v-on:click="add">新增</button>
      <button v-on:click="delect">移除</button>
       <button v-on:click="addall">新增addall</button>  

      <div class="box2">
           <label class="item"  v-for="i in undo">
               <input type="checkbox" v-bind:id="i.id" v-model="i.isCheck"/>{{i.item}} 
           </label>
    </div>
<script>
var app = new Vue({
      el: '#app',
      data: {
        /*去除數(shù)據(jù)中的readonly等屬性。*/
        todo:[{item:1234,id:"1"},{item:12345,id:"2"},{item:123456,id:"3",}],
        undo:[{item:2,id:"6"},{item:3,id:"4"},{item:4,id:"5"}],
    },
      methods: {
        add:function(){
          for (var i = 0; i < this.todo.length; i++){
            /*每新增一個(gè)就刪除待選區(qū)數(shù)據(jù)*/
            if(this.todo[i].isCheck == true){
                this.todo[i].isCheck = false;
                this.undo.push(this.todo[i]);
                this.todo.splice(i--,1)
            }
          };
        },
        delect:function(){
              for (var i = 0; i < this.undo.length; i++){
                if(this.undo[i].isCheck == true){
                      this.undo.splice(i,1);
                }
              };
            },
        addall:function(){
            /*深拷貝todo數(shù)組，加入undo數(shù)組*/
            var temp = this.todo.slice(0);
            this.undo = this.undo.concat(temp);
            this.todo = [];
        }
    }
})
</script>
</body>

2018年6月6日 05:45

編輯回答