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

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

我按照他们文档中关于如何使用该组件的说明进行操作,但我得到了 TypeError: show is not a function
在我的主 JS 文件(app.js)中,我添加了以下内容并使用 npm 添加到我的项目中

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

文档指出我现在可以从应用程序中的任何位置调用模态,因此我创建了一个特定于页面的 JS 文件并包含以下内容以隐藏/显示具有 name="hello-world" 的模态在包含 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 是在没有组件的情况下编写的,并且绑定(bind)到特定于页面的 Vue 实例,因此非常感谢任何帮助!

编辑

应用程序.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')

最佳答案

该错误未指定它是 $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);

关于vue.js - 使用 vue-js-modal 组件的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58147409/

相关文章:

css - Twitter Bootstrap 模态打开/关闭导致固定标题跳转

javascript - 当在父级中单击按钮时,使所有 <b-collapse> 在 child.vue 中不可见

javascript - 如何在没有 Quasar CLI 的情况下配置 Quasar 插件?

javascript - Vue.js 2 : Computed array iteration

javascript - 如何使用 vuex-router-sync 从路由模块获取 key

javascript - Vuejs - 未在实例上定义计算属性

javascript - 为什么在设置 JS 的功能时我的引导切换没有改变?

google-analytics - 如何在VueJS中跟踪Google Analytics/AdWords转化

vue.js - 如何验证多个文件的最大文件大小为每个文件 2 mb? (验证)

css - 防止仅CSS模式窗口跳到页面顶部