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

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>

标记代码

我需要在某处添加此代码，但我尝试在构建或控制台中抛出错误。

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

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

从＆quot; vue-multiselect＆＃39;

导入多重选择

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 - Multiselect - 在哪里添加事件？

1 个答案: