vue.js实现组件间的上移下移

问题描述

问 题

实现一个点击上移下移按钮，题目的顺序能够转变并有动画效果。刚开始我的思路是只处理了数组中的顺序，但是运行后才发现，因为整行tr是一个组件，就算我改变了数组中的数据的位置，但是按钮这些都是组件里的templeta里写的，所以。。。不是整行的移动啊。
（ps：最好还有动画效果，就是<transition-group>,实践中。。。）

代码：http://runjs.cn/code/gag3vw5l

解决方案

建议在组件中 $emit 事件，然后在父组件中绑定事件

<div class="rightList" id="list">
            <table class="list">
                <tr>
                    <th>题目</th><th>（删除）</th><th>（上移）</th><th>（下移）</th>
                </tr>
                <transition-group name="flip-list" tag="li">
                    <tr is="article-list" v-for="(item,$index) in itemBox" v-bind:item="item" v-bind:index="$index" @up="moveUp" @down="moveDown"></tr>
                </transition-group>
            </table>

        </div>

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

Vue.component('article-list',{
    template:'\
        <tr>\
            <td>{{item.title}}</td>\
            <td><button v-on:click="deleteList">删除</button></td>\
            <td><button v-on:click="moveUp">上移</button></td>\
            <td><button v-on:click="moveDown">下移</button></td>\
        </tr>',
    props: ['item','index'],
    methods: {
        deleteList: function() {
            console.log(list.itemBox[this.index]);
            return list.itemBox.splice(this.index, 1);
        },
        moveUp: function() {
            this.$emit('up', this.index)
        },
        moveDown: function() {
            this.$emit('down', this.index)
        }
    }
});
        
var list = new Vue({
    el: "#list",
    data: {
        currentView: "article-box",
        itemBox: [{
            "title": "数据结构--基本排序算法"
        },{
            "title": "排序，数据结构不可或缺的一大用途。"
        }]
    },
    methods: {
        moveUp (idx) {
          // 把 idx 行上移
      },
        moveDown (idx) {
          // 把 idx 行下移
      }
    }
});

这篇关于vue.js实现组件间的上移下移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！