javascript - vue2.0 Sortable.js dragging from left to right array problem

Question

Drag the left to the right array, drag the left to the right, modify the classes =false in all the arrays on the right, drag the current data to classes =true, when the two items on the left are the same and drag them to the right, the two pieces of data on the right will The classes are all true.

   return{
            design :[],
            icon_list:[{
                type:'image',
                icon:'fa fa-picture-o',
                name:'图片',
                content:{
                    image: ''
                },
                classs:false,
                i:''
            },
            {
                type:'text',
                icon:'fa fa-font',
                name:'富文本',
                content:{},
                classs:false,
                i:''
            },
            {
                type:'par',
                icon:'fa fa-bold',
                name:'参数',
                content:{
                  trace:[]
                },
                classs:false,
                i:''
            }]
        }
    }
   <draggable id="icon_list" class="comps-panel" :list="icon_list" :options="{cursor: 'move',group:{ name:'people', pull:'clone',put:false,cursor: 'move'},cursor: 'move',placeholder:'comp-place',connectWith: '.apps-container',zIndex: 99999, opacity: .6,items: '.comp-thumb:not(.not-sortable)',}">
      <p class="comp-thumb" v-for="(item, index) in icon_list" :key="index" v-bind:data-type="item.type" >
           <p class="comp-icon"><i v-bind:class="item.icon"></i></p>
           <span>{{item.name}}</span>
      </p>
  </draggable>
  <draggable  @change="log" id="list2" class="wp-comps J_WBModule apps-container" style="min-height: 450px;"  :list="slices" :options="{group:'people',cursor: 'move'}">
     <p v-for="(item,index) in slices"  :key="index" class="ng-scope ui-sortable-handle">
         <p class="panel-comp clearfix">
             <p :class="{editing : item.classs}">
                 <p @click="editSlice(item,index)" class="focus"></p>
                 {{item.type+index}}`请输入代码`
                 <i class="del-img fa fa-trash-o" mwl-confirm="" message="确认删除？" placement="left"
                    on-confirm="removeSlice($index)"
                    on-cancel="cancelClicked = true">
                 </i>
             </p>
         </p>
     </p>
   </draggable>
   
       editSlice(it,index){
          var _this = this;
          for (var i in this.slices) {
            _this.slices[i].classs = false;
            _this.slices[i].i = i;
            console.log('classs',_this.slices[i].classs)
          };
          console.log('222',this.slices);
          console.log('i',index)
          it.classs = true;
          //this.$set(it, 'classs', true);
          //this.design = item;
          console.log('222',this.slices);

        },
        log: function (e){
          this.editSlice(this.slices[e.added.newIndex],e.added.newIndex);
        }

Answer 1

Processed with deep copy