Question

我正在尝试使用vuedraggable组件并将其“嵌套”。

我正在从一个表中获取数据，从第二个表中获取数据，从第三个表中获取第二个数据（您已经明白了）。第二张和第三张表格是我当前感兴趣的能够更改顺序的表格。

我有一列名为order的列（是的，应该选择sorted_order或其他名称）。但是目前，我在“重用”映射功能方面遇到问题。我不想使用不同的功能，这似乎并不是正确的方法。

所以对于第一个，它看起来像这样：

<draggable v-if="stacksData.length" :element="'ul'" v-model="stacksData" :options="{animation: 150, handle:'.handle'}" @start="drag=true" @end="drag=false" @change="update">
        <li v-for="(stack, index) in stacksData">
            <i class="fas fa-arrows-alt handle"></i> <button v-on:click="fetchQuestions(stack)" class="btn btn-primary btn-sm">{{ stack.name }} ({{ stack.question_count }}) (order {{ stack.order }})</button>
        </li>
    </draggable>

第二个：

    <draggable v-if="questionsData.length" :element="'ul'" v-model="questionsData" :options="{animation: 150, handle:'.handle'}" @start="drag=true" @end="drag=false">
        <li v-if="questionsData.length" v-for="(question, index) in questionsData">
            <i class="fas fa-arrows-alt handle"></i> {{ question.description }} (order {{ question.order }})
        </li>
    </draggable>

我的“更新”功能，就像现在一样：

    update(event){
        console.log(event)
        this.stacksData.map((stacksData, index) => {
            stacksData.order = index + 1
        })
    }

预期结果：能够在包含列order的任何数组上调用update函数并更新其顺序。

使用相同的函数在VueJ中映射不同的数组

0 个答案: