1

I've been debugging for 8 hours trying to find out why this vue-select code is not working, but still no luck. when I run it, it show an error "option is undefined". I'm using npm to install vue-select plugin into my project. I put the following html code in my twig template. I did follow the instructions on vue-select page

<div id="myapp">
        <v-select :options="myoptions" label="title">
            <template slot="option" slot-scope="option">
                <span class="fa" :class="option.icon"></span>
                    {{ option.title }}
            </template>
        </v-select>
</div>

Here's the rest of my js implementation code.

import Vue from 'vue';
import VueSelect from 'vue-select';        
Vue.component('v-select', VueSelect)

new Vue({
    el: '#myapp',
    data: function () {
        return {
            myoptions: [
                {
                    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'
                }
            ]
        }
    }
});
mana
  • 1,075
  • 1
  • 24
  • 43
  • 1
    What did you provide via the myoptions property? – BCDeWitt Jul 31 '18 at 17:05
  • I've updated my question to add more information. – mana Jul 31 '18 at 17:09
  • This should work. Try adding `
    {{ myoptions }}
    ` right before `...` to see if the data binding works.     – FK82 Jul 31 '18 at 17:11
  • I just done add and run that code and it does print out the content of "myoptions". The data binding is work. – mana Jul 31 '18 at 17:15
  • 1
    If you have installed the plugin via NPM vs. CDN, then the documentation states to import and register the component as follows: `import Vue from 'vue' import vSelect from './components/Select.vue' Vue.component('v-select', vSelect)` You can also register it using the `components` object in your component itself – Derek Fulginiti Jul 31 '18 at 19:55
  • thanks @DerekFulginiti - I did follow the import and register component. Still not working. It could be a Vue js version...but I'm not too sure. – mana Aug 01 '18 at 01:48

2 Answers2

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>
Nuwan Attanayake
  • 1,161
  • 9
  • 20
  • thanks @Nuwan - I've added and run the code you provided. I still got the same error. ReferenceError: "option is not defined" – mana Jul 31 '18 at 17:30
  • @fkaufusi you should try the given example as it is on this page. https://sagalbot.github.io/vue-select/docs/Advanced/Templating.html. – Nuwan Attanayake Jul 31 '18 at 17:38
  • Yep, did follow that link, but no luck. I'm thinking it might be a Version of the Vue that I'm using that caused the problem...i'm not sure. – mana Aug 01 '18 at 01:43
  • @fkaufusi i have just updated the code with a full App.vue component which is tested and working well.My vue version also mentioned – Nuwan Attanayake Aug 01 '18 at 07:44
-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,075
  • 1
  • 24
  • 43