i'm trying to use draggable to drag header column in table like this
<thead>
<draggable
v-model="fields"
:element="'tr'"
:options="{ animation: 150 }"
>
<th class="" style="min-width: 59px"><Checkbox /></th>
<th
v-for="(field, index) in fields"
:key="index"
:style="field.type === 'date' ? 'text-align:center' : ''"
>
{{ field.text }}
</th>
</draggable>
</thead>
<script>
import Checkbox from "./Checkbox.vue";
import draggable from "vuedraggable";
export default {
components: {
Checkbox,
draggable,
},
props: {
fields: Array,
data: Array,
},
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "fields" Please help me Ths so much
The problem is that you defined your fields: Array and you are using it inside of your v-for there it is correct (if it's really an array).
But you have also used name fields inside of your dragable v-model. If you will rename this and change everything else inside of your code to the new name it should work out.
So in your case you send your data (fields) from your parent.vue to your child.vue and each time you select something from your dragable it will overwrite your array in the v-for.
So little example:
Array Fields: [Cat, Dog, Mouse] - You are selecting with v-model fields Cat - now your new Array Fields will be overwritten..
Hopefully it's now clear for you!