Laravel的Vuedraggable问题

Question

我一直想让Vuedraggable和Laravel一起工作一周。我是Vue的新手。

我的控制器将一个$testimonials变量返回到视图中。$testimonials变量是一个对象数组。我有以下观点：

   <table-draggable :testimonials="{{ $testimonials }}"></table-draggable>

我有一个在我的应用程序中正确注册的TableDraggable组件。此组件具有以下代码：

<template>
<table class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Quote</th>
            <th>Visible</th>
            <th>Order</th>
            <th>Sort</th>
        </tr>
    </thead>

    <draggable v-model="testimonialsNew" draggable=".testimonial" @change="update" handle=".handle">
        <tr v-for="testimonial in testimonialsNew" :key="testimonial.id" class="testimonial">
            <td>
                {{ testimonial.id }}
                <a :href="'testimonials/' + testimonial.id + '/edit'" class="btn btn-primary btn-xs mb">Edit</a>
                <form :action="'testimonials/' + testimonial.id" method="POST">
                    <input type="hidden" name="_token" :value="csrf">
                    <input type="hidden" name="_method" value="delete">

                    <button type="submit" class="btn btn-danger btn-xs">Delete</button>
                </form>

            </td>
            <td>{{ testimonial.name }}</td>
            <td>{{ testimonial.quote }}</td>
            <td>{{ testimonial.visible }}</td>
            <td>{{ testimonial.order }}</td>
            <td><i class="fa fa-arrows my-handle"></i></td>
        </tr>

    </draggable>

    </table>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        components: {
            draggable
        },
        props: ['testimonials'],
        data() {
            return {
                testimonialsNew: this.testimonials,
                csrf: document.head.querySelector('meta[name="csrf-token"]').content
            }
        },
        methods: {
            update() {
                this.testimonialsNew.map((testimonial, index) => {
                    testimonial.order = index + 1;
                })
                axios.put('/admin/testimonials/updateAll', {
                    testimonials: this.testimonialsNew
                }).then((response) => {
                    // success message
                })
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

数据正在返回，但没有可拖动的内容。我99%确定错误在这两行中：

        <draggable v-model="testimonialsNew" draggable=".testimonial" @change="update" handle=".handle">
        <tr v-for="testimonial in testimonialsNew" :key="testimonial.id" class="testimonial">

然而，似乎什么都不起作用。

Answer 1

您的可拖动类是.handle，但您使用的是my-handle。另外，我建议在draggable元素上使用tag="tbody“来获得有效的html。