Multiselect Vue data properties and methods missing

I am trying to use multiselect Vuejs component but I am getting the following errors:

Property or method "options" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

My multiselect js file looks like this:

import Multiselect from 'vue-multiselect'
  
Vue.component('multiselect', Multiselect)


export default {
    components: {
      Multiselect
    },
    data () {
      return {
        value: [
          { name: 'Javascript', code: 'js' }
        ],
        options: [
          { name: 'Vue.js', code: 'vu' },
          { name: 'Javascript', code: 'js' },
          { name: 'Open Source', code: 'os' }
        ]
      }
    },
    methods: {
      addTag (newTag) {
        const tag = {
          name: newTag,
          code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
        }
        this.options.push(tag)
        this.value.push(tag)
      }
    }
  }

My markup looks like this:

            <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>

my main.js looks like this:


/*
 |--------------------------------------------------------------------------
 | Laravel Spark Bootstrap
 |--------------------------------------------------------------------------
 |
 | First, we will load all of the "core" dependencies for Spark which are
 | libraries such as Vue and jQuery. This also loads the Spark helpers
 | for things such as HTTP calls, forms, and form validation errors.
 |
 | Next, we'll create the root Vue application for Spark. This will start
 | the entire application and attach it to the DOM. Of course, you may
 | customize this script as you desire and load your own components.
 |
 */
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue);
////
require('spark-bootstrap');
require('./components/multiselect');
require('./components/bootstrap');

var app = new Vue({
    mixins: [require('spark')],
});

Any help would be appreciated.

YeZawHein

6 years ago

Level 14

@demoskp You are using vue package but try to solve with .js file? In multiselect.vue

<template>
        <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
</template>
<script>

import Multiselect from 'vue-multiselect'
  
export default {
    components: {
      Multiselect
    },
    data () {
      return {
        value: [
          { name: 'Javascript', code: 'js' }
        ],
        options: [
          { name: 'Vue.js', code: 'vu' },
          { name: 'Javascript', code: 'js' },
          { name: 'Open Source', code: 'os' }
        ]
      }
    },
    methods: {
      addTag (newTag) {
        const tag = {
          name: newTag,
          code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
        }
        this.options.push(tag)
        this.value.push(tag)
      }
    },
    
  }

</script>

In app.js

Vue.component('multi', require('./multi.vue').default); 
//shouldn't same name with multiselect.It will be overwritten package's component and will be error Maximum call stack size exceeded

var app = new Vue({
    el: '#app',        //BTW you forgot in vue instance
    mixins: [require('spark')],
});

You can call in blade

<div id="app">
<multi></multi>
</div>

demoskp

6 years ago

Level 2

Adding el:'#app' breaks the whole application as this is build on top of Laravel Spark and If I am not mistaken references some root element id within the Mixins.

If I commit adding the element it still doesn't work and complains giving the following error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

YeZawHein

6 years ago

Level 14

import Multi from './multi.vue'; 

Vue.component('multi', Multi); 

var app = new Vue({
    mixins: [require('spark')],
});

demoskp

6 years ago

Level 2

When you are importing Multi from the multi.vue file where does Multi come from, I haven't seen it anywhere in the Vue file. Can you tell me how we get that?

Please or to participate in this conversation.