CODEWITHSUNDEEP
laravelvue.jsmulti-selectvue-component
Clinton Green
Clinton Green

Reputation: 9977

Vue js - Multiselect - Where to add event?

I am using the http://monterail.github.io/vue-multiselect/ Vue plugin in a laravel project and I am trying to get the tagging option to work. It is working but when I add the tagging JS I am unable to build using Gulp.

Here is what I have tried:

VUE JS

Vue.component('dropdown', require('./components/Multiselect.vue'));

const app = new Vue({
    el: '#app'
});

COMPONENT

<template>
  <div>
    <p>Multi Select</p>
    <multiselect
      :options="taggingOptions"
      :value="taggingSelected"
      :multiple="true"
      :searchable="searchable"
      :taggable="true"
      :on-tag="callback"
      @tag="addTag"
      @input="updateSelectedTagging"
      tag-placeholder="Add this as new tag"
      placeholder="Type to search or add tag"
      label="name"
      track-by="code">
    </multiselect>
  </div>
</template>


<script>
    import Multiselect from 'vue-multiselect'

    export default {
      components: { Multiselect },
      data () {
        return {
          value: null,
          options: ['list', 'of', 'options']
        }
      },
      methods: {
        updateSelected (newSelected) {
          this.value = newSelected
        }
      }
    };
</script>

TAGGING CODE

I need to add this code somewhere but everywhere I've tried throws errors in the build or the console.

addTag (newTag) {
const tag = {
name: newTag,
// Just for example needs as we use Array of Objects that should have other properties filled.
// For primitive values you can simply push the tag into options and selected arrays.
code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000))
}
this.taggingOptions.push(tag)
this.taggingSelected.push(tag)
},
updateSelectedTagging (value) {
 console.log('@tag: ', value)
 this.taggingSelected = value
}

Upvotes: 0

Views: 2819

Answers (1)

Saurabh
Saurabh

Reputation: 73609

You need to add this code as a [method event handler][1] in your Vue component, something like following:

import Multiselect from 'vue-multiselect' export default { components: { Multiselect }, data () { return { value: null, options: ['list', 'of', 'options'] } }, methods: { addTag (newTag) { const tag = { name: newTag, // Just for example needs as we use Array of Objects that should have other properties filled. // For primitive values you can simply push the tag into options and selected arrays. code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000)) } this.taggingOptions.push(tag) this.taggingSelected.push(tag) }, updateSelectedTagging (value) { console.log('@tag: ', value) this.taggingSelected = value } } }) [1]: https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers

Upvotes: 1

Related Questions