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

【问题标题】：Issues using vue-js-modal component使用 vue-js-modal 组件的问题
【发布时间】：2019-10-04 01:08:01
【问题描述】：

我按照他们文档中有关如何使用该组件的说明进行操作，但我得到了TypeError: show is not a function

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

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

文档指出我现在可以从应用程序中的任何位置调用模态，因此我创建了一个特定于页面的 JS 文件并包含以下内容以在包含 vue、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')

【问题讨论】：

你使用的是 Laravel 的默认前端脚手架吗？
另外，您能否展示完整的 Vue 代码，而不仅仅是 methods 对象？
@vince 我在 WordPress 项目中使用 Mix。我已经编辑了原始帖子以包含 app.js 和 profile.js
@vince 我有一个混合命令可以编译页面特定的 JS，例如 profile.js
啊，我明白了。好吧，我怀疑问题与您编译脚本的方式有关...根据您遇到的错误，当您的 show 函数运行时，this.$modal 已定义，但 this.$modal.show 未定义，或者是属性而不是函数。如果您将 show 函数更改为：show() { console.log('$modal', this.$modal); }，您会得到什么？

标签： vue.js vuejs2 modal-dialog vue-component es6-modules

【解决方案1】：

该错误未指定是未定义的 $modal.show() 函数还是您的 profile.js show() 函数。我怀疑这是您的 profile.js show() 函数，因为对于 vue-js-modal 而言，看起来一切正常。

您需要将 profile.js 添加为 vue mixin (https://vuejs.org/v2/guide/mixins.html)，以便将其功能添加到 vue 实例中。所以在你的 app.js 中添加：

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

【讨论】：