estoy tratando de usar arrastrable para arrastrar la columna del encabezado en una tabla como esta
<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, },Evite mutar un accesorio directamente, ya que el valor se sobrescribirá cada vez que se vuelva a renderizar el componente principal. En su lugar, utilice una propiedad calculada o de datos basada en el valor de la propiedad. Prop siendo mutado: "campos" Por favor, ayúdame.
El problema es que definió sus fields: Array y lo está usando dentro de su v-for allí es correcto (si es realmente una matriz).
Pero también ha utilizado fields de nombre dentro de su dragable v-model . Si cambia el nombre de esto y cambia todo lo demás dentro de su código al nuevo nombre, debería funcionar.
Entonces, en su caso, envía sus datos ( fields ) desde su parent.vue a su child.vue y cada vez que selecciona algo de su dragable , sobrescribirá su array en el v-for .
Tan pequeño ejemplo:
Campos de matriz: [Gato, Perro, Ratón]: está seleccionando con fields de modelo v Gato : ahora se sobrescribirán sus nuevos campos de matriz.
¡Espero que ahora te quede claro!