v-select 组件未加载到 HTML 中 [英] v-select component not loading into HTML
问题描述
我正在尝试创建一个基本站点，我需要在其中从下拉菜单中选择选项.我正在使用 vue-strap 库中的 Select.vue 来实现相同的功能.但是，v-select 组件未加载到 html 中.下面给出的是从 vue-strap 继承 Select.vue 的 App.vue:
<div><app-header></app-header><v-select v-model="selected" :options="['Vue.js','React']"></v-select><app-footer></app-footer></模板><脚本>从'./components/header.vue'导入标题从'../node_modules/vue-strap/src/Select.vue'导入选择从'./components/footer.vue'导入页脚导出默认{成分: {'app-header':标题，'app-footer':页脚，'v-select':选择，},数据() {返回 {}},}<样式范围></风格>
以下是我进入 Web 控制台的错误:
我无法解决这些错误.任何帮助表示赞赏.
:options="['Vue.js','React']"
上面这行可能是一个大问题，因为您传递的是静态数据而不是分配任何您不必使用的变量:
:这实际上是一个绑定运算符，只有在将选项绑定到某个变量时才应该使用它
例如:
data(){返回{选项:[['Vue.js','React']]}}现在在你的 vue 文件中，你可以添加
如果你不想声明变量，那么你可以删除:
<v-select v-model="selected" options="['Vue.js','React']"></v-select>始终确保传递给组件的任何内容都在数据中声明
如果你想使用计算，请确保在使用之前预先声明它
I am trying to create a basic site, where I need to select options from a dropdown menu. I am using the Select.vue from the vue-strap library to implement the same. However, the v-select component in not loading onto the html. Given below is the App.vue which inherits Select.vue from vue-strap:
<template>
<div>
<app-header></app-header>
<v-select v-model="selected" :options="['Vue.js','React']"></v-select>
<app-footer></app-footer>
</div>
</template>
<script>
import Header from './components/header.vue'
import select from '../node_modules/vue-strap/src/Select.vue'
import Footer from './components/footer.vue'
export default {
components: {
'app-header': Header,
'app-footer': Footer,
'v-select': select,
},
data() {
return {
}
},
}
</script>
<style scoped>
</style>
Given below are the errors that I am getting onto the web console:
I am unable to resolve these errors. Any help is appreciated.
:options="['Vue.js','React']"
Above line can be a big problem, since you are passing the static data and not assigning any variable you don't have to use :
: this actually a binding operator you should only use this when you are binding option to some variable
For eg:
data(){
return{
options:[['Vue.js','React']]
}
}
now inside your vue file, you can add
<v-select v-model="selected" :options=options></v-select>
If you dont want to declare variable then you can remove :
<v-select v-model="selected" options="['Vue.js','React']"></v-select>
Always make sure whatever you are passing to the component is declared inside the data
If you want to use computed make sure you declare it upfront before using it
这篇关于v-select 组件未加载到 HTML 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
