0

我对如何正确使用 vueDraggable 和 Laravel 感到困惑。

我可以在浏览器中拖动和排序元素，但数组没有改变（当我在控制台中检查时）/在我看来，这些更改没有反映在数组中。移动项目后数组索引号不应该改变吗？

在overview.blade.php 我有组件：

<qm-draggable :list="{{ $mylaravelarray }}"></qm-draggable>

在 qm-draggable.vue 我有：

<template>
  <draggable group="fragenblatt" @start="drag=true" @end="endDrag" handle=".handle">
    <li v-for="(item, index) in draggablearray" :key="item.index">
        // list items here
    </li>
  </draggable>
</template>

<script>
data() {
    return {
      draggablearray:{},
    };
  },
  props: {
    list: Array,
  },
  mounted: function(){
    this.draggablearray = this.list; // create a new array so I don't alter the prop directly.
  },
  [..]
  </script>

在它说的文档中，传递数组的一种方法是：

价值

类型：数组

必需：假

默认值：空

可拖动组件的输入数组。通常与内部元素 v-for 指令引用的数组相同。这是使用 Vue.draggable 的首选方式，因为它与 Vuex 兼容。它不应该直接使用，只能通过 v-model 指令使用：

<draggable v-model="myArray">

但是我在哪里做呢？在overview.blade.php 或组件（.vue）中，或两者兼而有之？

4

2 回答 2

2

尝试设置v-model您的draggable，因为这将更新draggablearray。

此外，如果draggablearray应该是一个数组，请将其初始化为一个，所以draggablearray:{}应该是draggablearray:[].

new Vue({
  el: '#app',
  data: () => {
    return {
      drag: false,
      draggablearray: [{
        id: 1,
        name: "1"
      }, {
        id: 2,
        name: "2"
      }, {
        id: 3,
        name: "3"
      }]
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.16.0/vuedraggable.min.js"></script>

<div class="container">
  <div id="app">

    <draggable v-model="draggablearray" group="fragenblatt">
      <li v-for="(item, index) in draggablearray">
        {{item.name}}
      </li>
    </draggable>

    {{draggablearray}}

  </div>

</div>


<script type="text/x-template" id="tree-menu">

  <div class="tree-menu">
    <div class="label-wrapper">
      <div :style="indent" :class="labelClasses" @click.stop="toggleChildren">
        <i v-if="nodes" class="fa" :class="iconClasses"></i>
        <input type="checkbox" :checked="selected" @input="tickChildren" @click.stop /> {{label}}
      </div>
    </div>

    <draggable v-model="nodes" :options="{group:{ name:'g1'}}">
      <tree-menu v-if="showChildren" v-for="node in nodes" :nodes="node.nodes" :label="node.label" :depth="depth + 1" :selected="node.selected" :key="node">
      </tree-menu>
    </draggable>

  </div>

</script>

于 2020-05-15T15:34:42.893 回答
0

啊，我解决了，现在我得到了改变的数组，我用这个实现了它：

  1. 必须在组件 .vue 文件中添加 v-model="draggablearray"
  2. 需要将数据中的“draggablearray”更改为数组，而不是对象。

现在看起来像这样：

在overview.blade.php 我有组件：

<qm-draggable :list="{{ $mylaravelarray }}"></qm-draggable>

在 qm-draggable.vue 我有：

<template>
  <draggable v-model="draggablearray" group="fragenblatt" @start="drag=true" @end="endDrag" handle=".handle">
    <li v-for="(item, index) in draggablearray" :key="item.index">
        // list items here
    </li>
  </draggable>
</template>

<script>
data() {
    return {
      draggablearray:[], //has to be an Array, was '{}' before
    };
  },
  props: {
    list: Array,
  },
  mounted: function(){
    this.draggablearray = this.list; // create a new array so I don't alter the prop directly.
  },
  [..]
  </script>
于 2020-05-15T15:33:23.810 回答