如何在 vuejs 中使用可拖动

Question

我正在尝试使用 draggable 像这样拖动表格中的标题列

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

但是当我启动项目时，它显示错误

避免直接改变prop，因为值会被覆盖 每当父组件重新渲染时。相反，使用数据或 基于道具值的计算属性。道具被变异： “领域” 请帮我这么多

Answer 1

问题是你定义了你的 fields: Array 并且你在你的 v-for 里面使用它是正确的（如果它真的是一个数组）。

但您在dragable v-model 中也使用了名称fields。如果您要重命名它并将代码中的其他所有内容更改为新名称，它应该可以解决。

因此，在您的情况下，您将数据 (fields) 从您的parent.vue 发送到您的child.vue，每次您从dragable 中选择某些内容时，它都会覆盖v-for 中的array。

这么少的例子：
数组字段：[Cat, Dog, Mouse] - 您正在使用 v-model fields Cat 进行选择 - 现在您的新数组字段将被覆盖..

希望你现在清楚了！