Question

我遵循了如何从其文档中使用该组件的说明，但是我得到了TypeError: show is not a function

在我的主要JS文件（app.js）中，我添加了以下内容，并使用npm添加到我的项目中

import VModal from 'vue-js-modal'
Vue.use(VModal)

文档指出，我现在可以在应用程序中的任何位置调用模式，因此我创建了一个页面特定的JS文件，并包含以下内容以在包含vue的页面上用name="hello-world"隐藏/显示模式， app.js和页面特定的profile.js文件。

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

加载页面时，看不到模态内容，但是，当我单击链接<a href="#" @click.prevent="show">Modal</a>时，显示方法TypeError: show is not a function出现错误

我正在使用laravel mix并验证所有内容都按预期进行了编译。以下是我在个人资料页面上添加JS文件的方式：

<script type='text/javascript' src='/assets/js/manifest.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/vendor.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/app.js?ver=1569678574'></script>
<script type='text/javascript' src='/assets/js/profile.js?ver=1569678574'></script>

我试图“提升”我的Vue和JavaScript经验，以前我只是坚持编写ES5，而我的Vue编写时没有组件，并且绑定到特定于页面的Vue实例，所以对您的帮助将不胜感激！

编辑

app.js

window.Vue = require('vue');

require('./global/header.js');

Vue.component('tabs', require('./components/Tabs.vue'));
Vue.component('tab', require('./components/Tab.vue'));

import VModal from 'vue-js-modal'

Vue.use(VModal)


new Vue({
    el: '#app'
});

profile.js

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

编译profile.js的webpack.mix.js

mix
  .js("resources/js/pages/home.js", "assets/js/home.js")
  .js("resources/js/pages/teams.js", "assets/js/teams.js")
  .js('resources/js/pages/profile.js', 'assets/js/profile.js')

Answer 1

该错误未指定其$ modal.show（）函数还是您的profile.js show（）函数未定义。我怀疑这是您的profile.js show（）函数，因为就vue-js-modal而言，一切看起来都很正常。

您需要添加profile.js作为vue混合（https://vuejs.org/v2/guide/mixins.html），以便将其功能添加到vue实例。因此，在您的app.js中添加：

import profile from '/assets/js/profile'
Vue.mixin(profile);

使用vue-js-modal组件的问题

1 个答案: