• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

160
Views
cómo usar arrastrable en vuejs

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

Pero cuando inicio el proyecto, muestra un error.

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.

almost 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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!

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error