Как реализовать множественный выбор multiselect/bootstrap-vue?

Question

[Ksey123]

Всем доброго времени.
Работаю с nuxt, api https://restcountries.eu/rest/v2/all,
bootstrap-vue и примерно такой же таблицей https://codepen.io/anon/pen/YoPPva?editors=1010
Стоит задача подключения multiselect, выбрал https://vue-multiselect.js.org
( https://jsfiddle.net/shentao/jqofkzxc/ )
Вопрос. Как безболезненно скрестить данное? Как понимаю, нужно в цикле проходить по элементам? Идей пока других нет(
Заранее очень благодарен!

Answer 1

[0xD34F]

https://jsfiddle.net/ujxdzas7/

Comments

[Ksey123]

У меня вид такой был, до момента записи этой темы:
https://jsfiddle.net/ksey/ou6405kL/11/

[0xD34F]

Ksey123, я не понял, что вы сейчас сказали. Попробуйте ещё раз, но перед этим подумайте.

[Ksey123]

0xD34F, В моем примере идет запрос к api, т.е заранее мы не знаем длину
!c.length || c.includes(row.continent),
В следствии чего, выходит ошибка, т.к сразу длина неизвестна.
Загружается список из 250 часто повторяющихся значений, мои действия:

for (var i = 0; i < this.continents.length; i++) {
           let region = {
             text: this.continents[i].region,
             value: this.continents[i].region,
           }
           this.region.push(region)
}
        this.region = this.region.filter((obj=> {
              return obj.value in this.region ? 0:(this.region[obj.value]=1);
          }));

из 250 остается 7, после получения
тут вопрос в асинхронности, насколько я понимаю?

[0xD34F]

Ksey123, не вижу, каким образом связано совместное использование vue-multiselect и bootstrap-vue с одной стороны, и запросы каких-то данных с попыткой их уникализации с другой.

[Ksey123]

0xD34F, Прошу прощения, вопрос был ужасным, соглашусь. Разобрался где нужно было поправить.
Интересует ещё один вопрос, если не затруднит ответить.
В объекте города, я принимаю массив currencies, который может состоять как из одного объекта так и множества объектов, с полями code,name,symbol.
соответственно, мне нужно сравнить их, если требования совпадает - выводить, аналогично как с continents, в Вашем примере ранее.
мой нерабочий подход:

!currencies.length || currencies.map(v => v.code) === row.currencies.code

В качестве первого параметра (currencies.map(v => v.code)) принимаю только code.

[0xD34F]

Ksey123,

currencies.map(v => v.code).includes(row.currencies.code)

??