• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

168
Vistas
how to use draggable in vuejs

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,
    },

But when i launch project, it show error

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

about 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

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!

about 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda