Vue.draggable: [Vue warn]: Avoid mutating a prop directly

[Laraveldeep]

Hi,

I am getting this error message everytime I try to re-order.

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders

This is npm install in Laravel project and I am using this on one of my Vue Component to show list of categories and re-order them.

My component template

<template>

    <div class="box">

        <table class="table is-fullwidth is-hoverable">

            <thead>

                <tr>
                    <th>Category (Drag to re-order)</th>
                </tr>

            </thead>

            <tbody>
                <draggable v-model="categories">
                    <tr v-for="(category,index) in categories" :key="category.catslug">
                        <td>
                            <span class="tag is-dark">{{ index+1 }}</span>
                            &nbsp;
                            {{ category.catname }}
                        </td>
                    </tr>
                </draggable>
            </tbody>

        </table>

        <button class="button is-primary" @click="showCats">Update</button>

    </div>

</template>



<script>

    import draggable from 'vuedraggable';

    export default {

        components: {
            draggable,
        },

        props: ['categories'],


        methods: {

            showCats: function() {
                console.log(this.categories);
            }

        },

    }

</script>

categories is query result from php.

Using Vuejs 2

Any suggestion?

Thanks!

[David-Desmaisons]

Use :list instead of v-model

[Laraveldeep]

Tried :list. Now it doesn't reorder. Dragged item goes back to old place.

[David-Desmaisons]

Create a jsfidle