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>

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

价值

类型:数组

要求:假

默认值: null

将数组输入到可拖放组件。通常情况下，内部元素inner指令引用的数组相同。这是使用Vue.draggable的首选方法，因为它与Vuex兼容。它不应直接使用，而应仅通过v-model指令使用：

<draggable v-model="myArray">

但我在哪能做到呢？在overview.blade.php中还是在组件(.vue)中，还是两者兼而有之？

Answer 1

尝试在您的draggable上设置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>

​

Answer 2

啊，我解决了，现在我把修改过的数组拿回来了，我用这个实现了它：

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

现在看起来是这样的：

在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>