Question

我正在尝试使用Vue.js多选组件： https://vue-multiselect.js.org/

不幸的是，它没有按原样呈现。而不是多选下拉列表，我得到这样的东西：

使用的代码：

HTML：

<div id="app">
  <button @click="toggle">open and close later
  </button>
    <pre>{{ isOpen }}</pre>
    <multiselect
        ref="multiselect"
        v-model="value"
        :options="options"
        :multiple="true"
        track-by="library"
        :custom-label="customLabel"
        @close="isOpen = false"
        @open="isOpen = true"
    >
  </multiselect>
</div>

使用的库（包含在中）：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">

使用的脚本（位于页面底部）：

<script>
        new Vue({
        components: {
        Multiselect: window.VueMultiselect.default
        },
        data: {
        isOpen: false,
        value: { language: 'JavaScript', library: 'Vue-Multiselect' },
        options: [
            {   language: 'JavaScript', library: 'Vue.js' },
          { language: 'JavaScript', library: 'Vue-Multiselect' },
          { language: 'JavaScript', library: 'Vuelidate' }
        ]
        },
      methods: {
        customLabel (option) {
          return `${option.library} - ${option.language}`
        },
        toggle () {
          this.$refs.multiselect.$el.focus()

          setTimeout(() => {
            this.$refs.multiselect.$refs.search.blur()
          }, 400)
        }
      }
    }).$mount('#app')
</script>

Answer 1

可能是针对Vue.js 2.0的最完整的选择解决方案，而没有 jQuery。

您正在使用vue 1.0

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js"></script>

所以您需要将其更改为v2

此外，您还需要查看控制台以查看是否有任何错误并进行修复

Django Vue.js-呈现多项选择下拉列表

1 个答案: