vue中对一个li上移动。下移动,删除操作

   <div class="form-group">
            <div class="col-sm-2 control-label">添加题目:</div>
            <div class="col-sm-10"><br>
              <ol>
                  <li v-for="item in listQuestions" :key="item.questionId" style="width: 1450px;">
                      {{item.stem}}
                     <!-- <button class="btn btn btn-danger" style="
                         background: #FA8072;" @click="moveUp(item)">向上</button>-->
                      <span class="btn btn btn-default" style="cursor:pointer;" @click="moveUp(item)">上移</span>
                      <span class="btn btn btn-default" style="cursor:pointer;" @click="moveDown(item)">下移</span>
                      <!--<button class="btn btn btn-default" style="
                         background: #FA8072;" @click="deleteQuestion(item.questionId)">删除</button>-->
                      <span  class="btn btn btn-default"style="background: #FA8072;" @click="deleteQuestion(item.questionId)">删除</span>
                  </li>
              </ol>
                <li class="btn btn-primary" style="font-weight: 700"><a @click="selectQuestions" ><span >添加问题</span></a></li>
            </div>
        </div>
js
 moveUp: function (item) {
            console.log(item)
            console.log(this.listQuestions)
            let index = vm.listQuestions.indexOf(item);  // 获取的index。或者通过v-for 遍历传过的index,可以简化此步骤。
            console.log("index"+index)
            if (vm.listQuestions.length > 1 && index != 0) {
                /*var temp = this.listQuestions[index - 1].content;      // 这三行的含义可见上面示意图
                vm.listQuestions[index - 1].content = vm.listQuestions[index].content;
                vm.listQuestions[index].content = temp;
                console.log(vm.listQuestions)*/
                var smallItem = this.listQuestions[index];
                var largeItem = this.listQuestions[index-1];

                this.$set(this.listQuestions,index,largeItem);
                this.$set(this.listQuestions,index-1,smallItem);
            }
            console.log("我想往上移动一位");
        },

        moveDown: function (item) {
            console.log(item)
            console.log(this.listQuestions)
            let index = vm.listQuestions.indexOf(item);  // 获取的index。或者通过v-for 遍历传过的index,可以简化此步骤。
            console.log("index"+index)
            if (vm.listQuestions.length > 1 && index != this.listQuestions.length - 1 ) {
                /*var temp = this.listQuestions[index - 1].content;      // 这三行的含义可见上面示意图
                vm.listQuestions[index - 1].content = vm.listQuestions[index].content;
                vm.listQuestions[index].content = temp;
                console.log(vm.listQuestions)*/
                var smallItem = this.listQuestions[index];
                var largeItem = this.listQuestions[index+1];

                this.$set(this.listQuestions,index,largeItem);
                this.$set(this.listQuestions,index+1,smallItem);
            }
            console.log("我想往下移动一位");
        },

//删除一行
        deleteQuestion: function (index) {
            var idIndex = vm.listQuestions.findIndex(item => item.questionId === index)//与传过来的id对应的下标
            var arr = new Array();
            arr = vm.listQuestions;
            arr.splice(idIndex, 1);//将这个下标对应的值删除操作;一般你到这里就ok了
            vm.listQuestions = arr;
            var listPidArray = new Array();//声明一个数组
            listPidArray = listPid.split(",");//按逗号分割成一个数组
            var indexString = index.toString();//将这index转换为字符串。下面需要用到
            var deleteIndex = listPidArray.indexOf(indexString);//找到这个字符串对应的下标
            console.log("deleteIndex" + deleteIndex);
            listPidArray.splice(deleteIndex, 1)//将这个对应的下标从全局变量的数组中去掉。(字符串方式去掉会出错你是用replace.总会报错:undefined,所以转化为数组再去处理)。
            var abc = listPidArray.toString();//将删除后的数组转化为字符串。
            listPid = abc;//将删除后字符串赋值给全局变量.
            console.log(abc + "xxxxxxxxxxxxlistPid");
            vm.q.questionsNum = vm.listQuestions.length;
            vm.q.average = parseInt(100 / vm.listQuestions.length);

            console.log(111 + "xx")
        },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值