VueDraggable 和 Laravel答案

【问题标题】：VueDraggable and LaravelVueDraggable 和 Laravel
【发布时间】：2020-05-15 15:04:11
【问题描述】：

我对如何正确使用 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>

在 documentation 它说，传递数组的一种方法是：

价值

类型：数组

必填：假

默认值：空

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

<draggable v-model="myArray">

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

【问题讨论】：

标签： laravel vuejs2 vuedraggable

【解决方案1】：

尝试在您的draggable 上设置v-model，因为这将更新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>

【讨论】：

【解决方案2】：

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

必须在组件 .vue 文件中添加 v-model="draggablearray"
需要将数据中的“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>

【讨论】：