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!