use :list with computed prop

already saw https://github.com/SortableJS/Vue.Draggable/issues/52 but i have a slightly diff example, check https://codepen.io/ctf0/pen/BwLezW

when using colorsList as computed prop, i can omit the watchers, mounted() and make the code much cleaner, so when trying to drag while using computed, only the first item gets dragged , but from second item on i get an error that computed prop doesnt have a setter.

i thought i could use the computed prop for v-model and use :list with some other empty array, so now the sorting can be cloned and saved into this new array, but that didnt work.

so is there anyway to use computed prop with :list ?

on a side note

when releasing a dragged item, there is a quick flicker of the old in-place item, try to re-sort the bubbles in the example and watch what happens for the colors b4 the sort gets applied.

[David-Desmaisons]

@phaberest as mentioned in this issua as well as in #52 , computed is not supported and could not be supported use provided work-around instead.

[phaberest]

I just needed to change the data in the main object when saving. Using :list for my computed and v-model for my original non filtered object works fine.

If anyone ever need it, this is what I did: (shownStages is my computed)

// This is a little tricky. If the shown stages are filtered, we
// can't update their order since they come from a computed, but
// we instead have to check their indexes on the real object and
// swap them.
if (this.shownStages.length != this.pipeline.stages.length) {
    let stagescopy = this.pipeline.stages;
    let changed    = [];
    _.forEach(this.shownStages, (stage, index) => {
        // Get the real indexes
        let real_index = _.findIndex(stagescopy, {
            id: this.sortedStages[index].id
        });
        let other_index = _.findIndex(stagescopy, {
            id: stage.id
        });

        // Check if we swapped them already.
        if (_.includes(changed, other_index)) {
            return false;
        }

        // Swap the elements
        let swapped = stagescopy[other_index];
        stagescopy[other_index] = stagescopy[real_index];
        stagescopy[real_index] = swapped;

        // Note the index we changed so we don't swap them again
        changed.push(other_index);
    });
    this.$set(this.pipeline.stages, stagescopy);
}