标签: vue-select

我正在尝试根据官方文档上的说明进行 v-select，但我的数据比文档中显示的更加嵌套，我无法在 v-select 中显示我的数据的llcName，并且我坚持这个。

这是我的 html div 和 Vue 实例，数据如下

<div id="vs">
  <h1>Vue Select</h1>
  <v-select multiple :options="options" :reduce="node=>  node.llcName" label='llcName' v-model='selected' />
  <pre>[[$data]]</pre>
</div>

<script>


Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#vs',
  delimiters: ["[[", "]]"],
  data: {
    options: [
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA1",
        "llcName": "new",
        "suppPayment": {
          "edges": [0]
        }
      }
    },
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA2",
        "llcName": "new2",
        "suppPayment": {
          "edges": [1]
        }

      }
    },
    {
      "node": {
        "id": "U3VwcGxpZXJPYmplY3Q6MzA3",
        "llcName": "rteer",
        "suppPayment": {
          "edges": [2]
        } …

我需要将数组选项的第一个元素设置为默认选项，如下所示

但我明白了：

我的组件代码：

<v-select :options="options" label="title" class="select">
         <template slot="option" slot-scope="option">
             <span :class="option.icon"></span>
             <img class="language-flag" :src="option.img" /> {{ option.title }}
         </template>
         <template slot="selected-option" slot-scope="option">
             <span :class="option.icon"></span>
             <img class="language-flag" :src="option.img" /> {{ option.title }}
         </template>
</v-select>

脚本：

  export default {
        data() {
            return {
                options: [{
                        title: 'RU',
                        img: require('../../assets/icons/flags/RU.svg'),
                    },
                    {
                        title: 'KZ',
                        img: require('../../assets/icons/flags/KZ.svg')
                    },
                ],
            }
        },
    }

我使用这个 vue-multiselect 插件：https://vue-multiselect.js.org/
因为我要多次使用它，所以我想设置一些默认道具。

例如，我希望selectLabelprop 是一个空字符串，并且可能设置一些<slot>s。

在典型的 jQuery 插件中，我可以使用它$.plugin.defaults来设置默认值。如何使用 vue 插件做同样的事情？

我将vue-select用于多个值。这是一个示例：https : //codepen.io/sagalbot/pen/opMGro

我有以下代码：

<v-select multiple v-model="selected" :options="options"></v-select>

和JS：

Vue.component('v-select', VueSelect.VueSelect)

new Vue({
  el: '#app',
  data: {
    selected: ['foo','bar'],
    options: ['foo','bar','baz']
  }

谢谢！

我正在使用 vue-select，当我从选择列表中选择一个项目时，我想创建一个点击事件。我试过，@change="changedValue" @selected="changedLabel"但这对我不起作用。

Vue选择

<v-select placeholder="Add administrator" class="form-control-select" label="displayName" :options="items"></v-select>

有谁知道如何触发事件？谢谢