Используйте одну и ту же функцию для отображения различных массивов в VueJs - PullRequest
Новая
       18

Используйте одну и ту же функцию для отображения различных массивов в VueJs

0 голосов
/ 14 декабря 2018

Я пытаюсь использовать 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 и обновите его порядок.

...