v-select component not loading into HTML

问题

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.

回答1:

: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

来源：https://stackoverflow.com/questions/60080825/v-select-component-not-loading-into-html

标签

Vue.js

vuejs2

vue-component

vue-select