Vue js - Multiselect - Куда добавить событие?

Я использую http://monterail.github.io/vue-multiselect/ Vue. плагин в проекте laravel, и я пытаюсь заставить работать опцию тегирования. Он работает, но когда я добавляю JS с тегами, я не могу создавать с помощью Gulp.

Вот что я пробовал:

VUE JS

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

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

КОМПОНЕНТ

<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>

КОД РАЗМЕЩЕНИЯ

Мне нужно где-то добавить этот код, но везде, где я пробовал, возникают ошибки в сборке или консоли.

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
}

vue.js laravel vue-component multi-select
person Clinton Green    schedule 21.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам необходимо добавить этот код в качестве обработчика событий метода в ваш компонент Vue, примерно так:

импортировать 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
       }
    }
})
person Saurabh    schedule 21.11.2016