Vue js - 多选 - 在哪里添加事件？

Question

我在 laravel 项目中使用 http://monterail.github.io/vue-multiselect/ Vue 插件，我正在尝试让标记选项起作用。它正在工作，但是当我添加标记 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
}

Answer 1

您需要将此代码作为 method event handler 添加到您的 Vue 组件中，如下所示：

从 '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
       }
    }
})

Vue js - 多选 - 在哪里添加事件？

Vue js - Multiselect - Where to add event?

multi-select

laravel

vue.js

vue-component