[英]Vue select slot scope is undefined
I've been debugging for 8 hours trying to find out why this vue-select code is not working, but still no luck. 我已经调试了8个小时,试图找出为什么该vue-select代码不起作用,但仍然没有运气。 when I run it, it show an error " option is undefined ".
当我运行它时,它显示错误“ 选项未定义 ”。 I'm using npm to install vue-select plugin into my project.
我正在使用npm将vue-select插件安装到我的项目中。 I put the following html code in my twig template.
我将以下html代码放入我的树枝模板中。 I did follow the instructions on vue-select page
我确实按照vue选择页面上的说明进行操作
<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>
Here's the rest of my js implementation code. 这是我的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'
}
]
}
}
});
Here is my test component which is working perfectly as expected. 这是我的测试组件,可以正常运行。 My vue dependencies are as follows
我的Vue依赖关系如下
"dependencies": {
"vue": "^2.5.16",
"vue-select": "^2.4.0"
},
App.vue component 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>
Thank you all for your help. 谢谢大家的帮助。 I've found the problem, it's my code implementation was incorrect.
我发现了问题,这是我的代码实现不正确。 I didn't import the vue component correctly into my template.
我没有将vue组件正确导入到模板中。 It's working fine now.
现在工作正常。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.