Vue select 插槽作用域未定义

Question

我已经调试了 8 个小时，试图找出为什么这个 vue-select 代码不起作用，但仍然没有运气。当我运行它时，它显示错误“ 选项未定义 ”。我正在使用 npm 将 vue-select 插件安装到我的项目中。我将以下 html 代码放入我的树枝模板中。我确实按照 vue-select page

上的说明进行操作

<div id="myapp">
        <v-select :options="myoptions" label="title">
            <template slot="option" slot-scope="option">
                <span class="fa" :class="option.icon"></span>
                    {{ option.title }}
            </template>
        </v-select>
</div>

这是我剩下的js实现代码。

import Vue from 'vue';
import VueSelect from 'vue-select';        
Vue.component('v-select', VueSelect)

new Vue({
    el: '#myapp',
    data: function () {
        return {
            myoptions: [
                {
                    title: 'Read the Docs',
                    icon: 'fa-book',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View on GitHub',
                    icon: 'fa-github',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View on NPM',
                    icon: 'fa-database',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View Codepen Examples',
                    icon: 'fa-pencil',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                }
            ]
        }
    }
});

Answer 1

这是我的测试组件，它按预期完美运行。我的vue依赖如下

  "dependencies": {
    "vue": "^2.5.16",
    "vue-select": "^2.4.0"
  },

App.vue 组件

<template>
  <div id="app">
    <v-select :options="options" label="title">
            <template slot="option" slot-scope="option">
                <span class="fa" :class="option.icon"></span>
                    {{ option.title }}
            </template>
    </v-select>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: function() {
        return {
            options: [
                {
                    title: 'Read the Docs',
                    icon: 'fa-book',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View on GitHub',
                    icon: 'fa-github',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View on NPM',
                    icon: 'fa-database',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                },
                {
                    title: 'View Codepen Examples',
                    icon: 'fa-pencil',
                    url: 'https://codeclimate.com/github/sagalbot/vue-select'
                }
            ]
        }
      }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 2

谢谢大家的帮助。我发现了问题，是我的代码实现不正确。我没有将 vue 组件正确导入到我的模板中。现在一切正常。

Vue select 插槽作用域未定义

Vue select slot scope is undefined

javascript

vue.js

vue-component

vuejs2

vue-select