Skip to content

Instantly share code, notes, and snippets.

@kalenjordan
Created May 3, 2020 15:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kalenjordan/284d8e670219fa841a6c540ce4db6e15 to your computer and use it in GitHub Desktop.
Save kalenjordan/284d8e670219fa841a6c540ce4db6e15 to your computer and use it in GitHub Desktop.
<template>
<div>
<multiselect track-by="username" :loading="isLoading" @search-change="asyncFind"
:options="options" placeholder="Enter a twitter handle" :show-no-results="false"
label="name" :option-height="104" :show-labels="false">
<template slot="noOptions">
Type the name of a product, service, or agency
</template>
<template slot="singleLabel" slot-scope="props">
<img class="option__image w-4 h-4 rounded-full inline" :src="props.option.img">
<span class="ml-1 text-sm">{{ props.option.name }}</span>
</template>
<template slot="option" slot-scope="props">
<img class="option__image w-4 h-4 rounded-full inline" :src="props.option.img">
<span class="ml-1 text-sm">{{ props.option.username }}</span>
</template>
</multiselect>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
// register globally
Vue.component('multiselect', Multiselect);
export default {
// OR register locally
components: { Multiselect },
data () {
return {
options: [],
isLoading: false,
value: null
}
},
mounted() {
//
},
methods: {
asyncFind (query) {
this.isLoading = true;
if (! query) {
return;
}
axios.get('/api/add-from-twitter/' + query).then((response) => {
console.log('Loaded ' + query);
console.log(response.data);
this.options = response.data;
this.isLoading = false;
});
}
}
}
</script>
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style>
/*your styles*/
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment