How to link checkbox with multiselect in Vue?

Question

Interested in the question of how to associate a checkbox with multiselect on Vue. For example, in multiselect there are certain categories. The same categories are repeated in the checkbox. It is necessary with the active checkbox to make the active item in the list. It should turn out as in the photo that is attached. Jsfiddle code.

let vm = new Vue({ components: { Multiselect: VueMultiselect.default }, data() { return { listCategory: ['Категория 1', 'Категория 2', 'Категория 3', 'Категория 4', 'Категория 5', 'Категория 6', 'Категория 7'], valueCategory: [], } }, el: "#main-app", })

Accepted Answer · 2018-09-28T12:06:31

The point is to output checkboxes via v-for and set the dynamic attribute checked, which is true if the checkbox value is contained in the multiselect array.

You can run here: https://jsfiddle.net/abuv5pnz/32/

 <div id="main-app"> <multiselect v-model="valueCategory" :options="listCategory" :multiple="true" values="category" placeholder="Категория" class="category-dropdown"> <span slot="noResult">Oops! No elements found. Consider changing the search query.</span> </multiselect> <ul> <li v-for="cat of listCategory"> <input type="checkbox" :id="'category-' + cat" :value="cat" :checked="valueCategory.includes(cat)"> <label :for="'category-' + cat">{{ cat }}</label> </li> </ul> </div>

update:

I added that if you select the checkbox, it is also selected in multiselect. The bottom line is that the checkbox has a handler @input="setCheckbox($event, cat)"

If the checkbox is selected, then add an item to valueCategory otherwise remove from there.

  methods: { setCheckbox (event, el) { if (event.target.checked) this.valueCategory.push(el) else this.valueCategory = this.valueCategory.filter(i => i !== el) } },

Can you please tell me how to set a unique picture for each category?
@Endu don't quite understand what the picture is, can I have the code?
Now when deleting marked categories from the list (in multiselect), it duplicates them.
@Endu you have the whole object there in valueCategory, and not the line knowledge from the category that you specified in the values (I looked at the API of this library and did not find such a parameter there) Therefore, it probably deletes the crooked one.

How to link checkbox with multiselect in Vue?

1 answer 1

More articles: