v-select 组件未加载到 HTML 中答案

【问题标题】：v-select component not loading into HTMLv-select 组件未加载到 HTML 中
【发布时间】：2020-05-21 15:56:55
【问题描述】：

我正在尝试创建一个基本站点，我需要从下拉菜单中选择选项。我正在使用 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 控制台上遇到的错误：

我无法解决这些错误。任何帮助表示赞赏。

【问题讨论】：

你在哪里定义selected 在v-model="selected"？
嗨，布拉欣。感谢您查看这个。 selected 是 Select.vue 中的计算属性。我需要包含 v-model="selected" 吗？我以为因为Select.vue是库的一部分，所以我可以直接使用它，无需任何修改。
你在使用它但没有定义它
我想知道这是怎么回事。我还没碰过那个文件。
selected 应该定义在像data() { return {selected:null}}这样的数据对象中

标签： vue.js vuejs2 vue-component

【解决方案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>

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

如果你想使用计算，请确保在使用前预先声明它

【讨论】：