#javascript #vue.js #vue-cli #vue-sfc
#javascript #vue.js #vue-cli #vue-sfc
Вопрос:
Я изучаю Vue и пытаюсь создать первое приложение с помощью vue-cli. У меня есть простые локальные компоненты, которые хорошо работают. Но у меня возникает проблема, когда я хочу использовать внешние компоненты. Например, ‘vuetable-2’. Я устанавливаю его локально через npm с помощью терминала:
npm install --save vue-multiselect
Установка выполнена успешно, и папка ‘vue-multiselect’ появляется в каталоге ‘node_modules’. Затем я добавляю соответствующие ссылки в файл моего однофайлового компонента ‘ms.vue’:
<template>
<div>
Hello world!
<label class="typo__label">Select with search</label>
<multiselect v-model="value" :options="options" :custom-label="nameWithLang" placeholder="Select one" label="name" track-by="name">
</multiselect>
<pre class="language-json"><code>{{ value }}</code></pre>
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {
Multiselect
},
data () {
return {
value: { name: 'Vue.js', language: 'JavaScript' },
options: [
{ name: 'Vue.js', language: 'JavaScript' },
{ name: 'Rails', language: 'Ruby' },
{ name: 'Sinatra', language: 'Ruby' },
{ name: 'Laravel', language: 'PHP' },
{ name: 'Phoenix', language: 'Elixir' }
]
}
},
methods: {
nameWithLang ({ name, language }) {
return `${name} — [${language}]`
}
}
}
</script>
<style>
</style>
Все компилируется хорошо, но когда я захожу в браузер, страница пуста и появляется следующая ошибка в консоли:
runtime-core.esm-bundler.js?5c40:5435 Uncaught TypeError: selfHook.call is not a function
at callSyncHook (runtime-core.esm-bundler.js?5c40:5435)
at applyOptions (runtime-core.esm-bundler.js?5c40:5227)
at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6006)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:5942)
at setupComponent (runtime-core.esm-bundler.js?5c40:5882)
at mountComponent (runtime-core.esm-bundler.js?5c40:4161)
at processComponent (runtime-core.esm-bundler.js?5c40:4137)
at patch (runtime-core.esm-bundler.js?5c40:3784)
at mountChildren (runtime-core.esm-bundler.js?5c40:3950)
at mountElement (runtime-core.esm-bundler.js?5c40:3896)
Я пробовал с другим компонентом и получил ту же ошибку.
Мой файл ‘App.vue’:
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<ms></ms>
</div>
</template>
<script>
import ms from './components/ms.vue'
export default {
name: 'App',
components: {
ms
}
}
</script>
<style>
</style>
редактировать 2020-09-02:
Я вижу, что проблема появляется только в Vue3. Когда я воссоздаю весь проект в Vue2, все работает хорошо. Но по-прежнему не имею представления об основной причине проблемы…