VueDraggable 和 Laravel

Question

我对如何正确使用 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中它说，传递数组的一种方法是：

价值

类型：数组

必填：false

默认值：空

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

<draggable v-model="myArray">

但是我该在哪里做呢？在 overview.blade.php 或组件 (.vue) 中，或两者中？

Answer 1

啊，我解决了，现在我把修改后的数组找回来了，我是这样实现的：

必须在组件 .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>

Answer 2

尝试在您的 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>

VueDraggable 和 Laravel

VueDraggable and Laravel

laravel

vuejs2

vuedraggable