未加载到HTML中的v-select组件

Question

我正在尝试创建一个基本的网站，在那里我需要从下拉菜单中选择选项。我正在使用vue-strap库中的Select.vue来实现相同的功能。然而，v-select组件不会加载到html上。下面给出的是从vue-strap继承Select.vue的App.vue：

<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>

下面是我在web控制台上遇到的错误：

​

我无法解决这些错误。任何帮助都是非常感谢的。

Answer 1

:options="'Vue.js'，'React'“

上面这行可能是个大问题，因为您传递的是静态数据，而不是赋值任何不需要使用的变量：

：这实际上是一个绑定运算符，只有在将选项绑定到某个变量时才应该使用它

例如：

data(){
return{
options:[['Vue.js','React']]
}

}

现在在您的vue文件中，您可以添加

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

如果你不想声明变量，那么你可以删除：

 <v-select v-model="selected" options="['Vue.js','React']"></v-select>

始终确保传递给组件的任何内容都在数据内声明

如果您想使用computed，请确保在使用它之前预先声明它