Show selected item in Searchable component through fa-check icon
MODIFY
resources/assets/js/components/Searchable.vue
resources/assets/js/components/Searchable.vue
<div class="searchable__list" v-if="shown">
<input type="search" v-model="query" placeholder="Search" ref="query" />
<ul>
- <li v-for="item in queriedItems" @click="select(item)" v-html="item.label"></li>
+ <li
+ class="row"
+ v-for="item in queriedItems"
+ @click="select(item)">
+ <div
+ class="row__column row__column--compact"
+ style="width: 20px;">
+ <i
+ class="fas fa-check fa-xs"
+ v-if="isSelected(item)"></i>
+ </div>
+ <div
+ class="row__column"
+ v-html="item.label"></div>
+ </li>
</ul>
</div>
</div>
}
},
+ isSelected(item) {
+ return this.selected == item
+ },
+
toggleShown() {
this.shown = !this.shown

Show selected item in Searchable component through fa-check icon