Vue.draggable: Two lists with filtering the results

[dmitov]

Hi!

I am building a drag and drop applet in which I'd like to allow filtering. Using vue2-filters I've achieved desired UI.

<el-input placeholder="Filter available meals" v-model="filter_available"></el-input>

<draggable :list="available_products" class="draggable" :options="{group:'food'}">
    <div v-for="product in filterBy(available_products, filter_available, 'name')" class="list-item">
        <img :src="product.image" height="20"> {{ product.name }}
    </div>
</draggable>

<el-input placeholder="Filter selected meals" v-model="filter_selected"></el-input>

<draggable :list="meal.products" class="draggable" :options="{group:'food'}">
    <div v-for="product in filterBy(meal.products, filter_selected, 'name')" class="list-item">
        <img :src="product.image" height="20"> {{ product.name }}
    </div>
</draggable>

Filters are working great for both draggable lists. However, when filtering the results, it changes the index of the elements and when moving from one list to another - we move a different item, not the one dragged.

I assumed that adding data-id to the item's div and linking it to the product id would do, unfortunately it doesn't work.

Any ideas?

[David-Desmaisons]

@dmitov:

The problem is that drggable is observing a different array than the one used in the v-for (meaning without filtering)

Try to set your filtered array as computed properties and bind both draggable and v-for to the same collection.

[David-Desmaisons]

Other possibility is to copy the filtered array to your data object and use this collection on both v-for and list prop

[David-Desmaisons]

@dmitov , any feedback on these work-around?

[dmitov]

@David-Desmaisons Thanks for the tips!

Using computed properties partly worked.

However, if I filter the second list the plugin stops working with no errors, just I can't move any item to/from any list.

For the time being I will keep the filtering only for the first list, as it will do great job.

Thanks once again!

[David-Desmaisons]

@dmitov Thanks for the feedback, since you find a workaround, I am closing the issue.

[MoraesGil]

Try to set your filtered array as computed properties and bind both draggable and v-for to the same collection.

Thank you works very well for me

i'm have two lists first comes from api clone to second and have a prop array of exeception items
thas receive second list by $emit and when i change second list i don't need reload first list

to work i set first list v-for and v-model same source computed{ FilteredList() }