Vue js - Multiselect - Wo kann ein Event hinzugefügt werden?

Question

Ich verwende das http://monterail.github.io/vue-multiselect/ Vue-Plugin in einem Laravel-Projekt und ich versuche, die Tagging-Option zu arbeiten. Es funktioniert, aber wenn ich das Tagging JS hinzufüge, kann ich nicht mit Gulp bauen. Hier

ist, was ich habe versucht:

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

Ich muss diesen Code irgendwo hinzufügen, aber überall, wo ich es versucht habe, werden Fehler im Build oder in der Konsole ausgegeben.

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 
} 

Answer 1

Sie müssen diesen Code als method event handler in Ihrer Vue Komponente hinzuzufügen, so etwas wie folgt vor:

Import von Multiselect '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 
     } 
    } 
})