问题描述
我正在学习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',{ name: 'Rails',language: 'Ruby' },{ name: 'Sinatra',{ 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中重新创建整个项目时,一切工作正常。但是仍然不知道问题的核心原因...
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)