Vue多选不显示答案

【问题标题】：Vue Multiselect not displayingVue多选不显示
【发布时间】：2017-07-28 05:50:09
【问题描述】：

我正在尝试在我的 Laravel 5.3 项目中使用 Vue Multiselect V2。我正在使用这个例子，http://monterail.github.io/vue-multiselect/#sub-single-select

我的 app.js 文件中有以下设置：

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

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

在 Multiselect.vue 文件中

<script>
  import Multiselect from 'vue-multiselect'

  export default {
    components: {
      Multiselect
    },
    data () {
      return {
        value: '',
        options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
      }
    }
  }
</script>

我在 blade 中这样称呼它：

<div id="app">
  <label class="typo__label">Single select</label>
  <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
  <pre class="language-json"><code>@{{ value  }}</code></pre>
</div>

这是它在 DOM

中的显示方式

<div id="app">
  <label class="typo__label">Single select</label>
  <!---->
  <pre class="language-json"><code></code></pre>
</div>

目前下拉菜单不显示，我在控制台中看不到任何错误。我本来希望在某个地方添加一个模板，但我在 Vue Multiselect 文档中找不到任何提及。

【问题讨论】：

标签： laravel vue.js multi-select vuejs2

【解决方案1】：

对于遇到这些问题的任何人，请不要按照官方文档中的示例进行操作。他们不工作，而是在他们的 Github 页面上使用它。 https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

基本示例

<template>
  <div>
    <multiselect
      v-model="selected"
      :options="options">
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        selected: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

【讨论】：

最后一位<style> 至关重要。有时，当您不包含它时，它会在本地工作，但会在构建时删除 - 然后您知道您必须将它单独添加到有问题的组件中。
@ClintonGreen 对于 data() 中的选项，我将如何通过对象数组并仅显示 object.titles ???现在我从我的道具传递一个数组，它传递了整个 json 对象，我应该使用一个方法循环然后将 this.myMethod 传递给选项：this.myMethod in data？
@jeand'arme 对于 data() 中的选项，我将如何通过对象数组并仅显示 object.titles ???现在我从我的道具传递一个数组，它传递了整个 json 对象，我应该使用一个方法循环然后将 this.myMethod 传递给选项：this.myMethod in data？

【解决方案2】：

要从 vue 多选中更新数组，请使用 @select 和 @remove 事件

Example: <multiselect  @select="selectionChange" @remove="removeElement"> </multiselect>

Into methods add the next functions

methods: {
    removeElement() {
      this.$forceUpdate();
    },
    selectionChange() {
      this.$forceUpdate();
    },
}

this.$forceUpdate(); will update the state.

【讨论】：