У меня возникла ошибка при попытке использовать vue-select в приложении vuejs3

При попытке использовать vue-select в приложении vuejs3 я получил ошибку в консоли:

test.vue?2762:16 Uncaught TypeError: _App_vue__WEBPACK_IMPORTED_MODULE
<template>
  <div>
    <h1>Vue Select</h1>
  
    stringVar:{{ stringVar}}
    <v-select :options="options"></v-select>
  
  </div>
</template>

<script>
  import app from './../App.vue'
  import { ref, onMounted } from 'vue'
  import vSelect from 'vue-select'
  import 'vue-select/src/scss/vue-select.scss'
  app.component('v-select', vSelect)

  export default {
    name: 'loginPage',
    components: {},

    setup () {
      let stringVar = ref('Init value')
      const options = [
        {
          code: 'A',
          label: 'Active'
        },
        {
          code: 'I',
          label: 'Inactive'
        },
        {
          code: 'N',
          label: 'New'
        }
      ]

      const testInit = async () => {
        console.log('testInit emitter::')
      }

      onMounted(testInit)

      return {
        stringVar
      }
    } // setup () {

  }
</script>
_.default.component is not a function at eval (test.vue?2762:16) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/test.vue?vue&type=script&lang=js (app.js:1079) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (test.vue?c371:1) at Module../src/views/test.vue?vue&type=script&lang=js (app.js:1613) at __webpack_require__ (app.js:854) at fn (app.js:151) at eval (test.vue?b424:1) at Module../src/views/test.vue (app.js:1601)

Мой файл vue:

<template>
  <div>
    <h1>Vue Select</h1>
  
    stringVar:{{ stringVar}}
    <v-select :options="options"></v-select>
  
  </div>
</template>

<script>
  import app from './../App.vue'
  import { ref, onMounted } from 'vue'
  import vSelect from 'vue-select'
  import 'vue-select/src/scss/vue-select.scss'
  app.component('v-select', vSelect)

  export default {
    name: 'loginPage',
    components: {},

    setup () {
      let stringVar = ref('Init value')
      const options = [
        {
          code: 'A',
          label: 'Active'
        },
        {
          code: 'I',
          label: 'Inactive'
        },
        {
          code: 'N',
          label: 'New'
        }
      ]

      const testInit = async () => {
        console.log('testInit emitter::')
      }

      onMounted(testInit)

      return {
        stringVar
      }
    } // setup () {

  }
</script>

В package.json:

"vue": "^3.0.0",
"vue-select": "^3.10.8",

Я неправильно настроил vue-select или vue-select не для vuejs 3? Здесь https://github.com/sagalbot/vue-select я не нашел упоминаний из vuejs 3, но последнее обновление источника 3 месяца назад ...

Спасибо!


person Petro Gromovo    schedule 11.11.2020    source источник


Ответы (1)


Думаю, библиотека не обновлялась. В их package.json говорится, что они все еще зависят от: "vue": "^2.6.10". Может быть, вам стоит открыть вопрос по их проекту на github?

person Didi    schedule 12.11.2020
comment
Чтение этой ветки github.com/sagalbot/vue-select/issues/1307 похоже, что были обновления для обеспечения совместимости с Vue 3. Не уверены, что он не был объединен и мы еще не можем его использовать? - person Petro Gromovo; 13.11.2020