-2👍
✅
Thank you all for your help. I’ve found the problem, it’s my code implementation was incorrect. I didn’t import the vue component correctly into my template. It’s working fine now.
👤mana
1👍
Here is my test component which is working perfectly as expected.
My vue dependencies are as follows
"dependencies": {
"vue": "^2.5.16",
"vue-select": "^2.4.0"
},
App.vue component
<template>
<div id="app">
<v-select :options="options" label="title">
<template slot="option" slot-scope="option">
<span class="fa" :class="option.icon"></span>
{{ option.title }}
</template>
</v-select>
</div>
</template>
<script>
export default {
name: 'app',
data: function() {
return {
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Source:stackexchange.com