Question

我想从其他JS文件调用我的通知函数，但它总是返回undefined。

notification.js

function notification(message, level = 'success') {
    Lobibox.notify(level, {
        delayIndicator: false,
        msg: message

    });
}

addToCart.vue

<template>
    <div>
    <button class="button dark small" @click="addToCart(menu, price)">
        <i class="fa fa-cutlery fa-lg m-right-5"></i>
        Pilih Menu
    </button>
    </div>
</template>

<script>
    export default{
        props: ['menu', 'price'],

        methods:{
            addToCart(menu, price){
                const currentPoint = $('#current_point').val();

                if(price > currentPoint){
                    return notification('Point is not enough', 'error')
                }


            }
        }
    }
</script>

app.js

Vue.component('addtocart', require('./components/AddToCart.vue'));
new Vue({
    el: '#app'
});

HTML：

<script src="{{ asset('js/notification.js') }}"></script>
<script src="{{ asset('js/app.js') }}"></script>

每次price > currentPoint被调用时，它总是返回Uncaught ReferenceError: notification is not defined。

我使用LaravelMix编译它。

任何解决方案？

Answer 1

您似乎只需要在HTML中执行以下操作：

<script src="js/notification.js"></script>
<script src="js/app.js"></script>

Answer 2

notification.js

function notification(message, level = 'success') {
    Lobibox.notify(level, {
        delayIndicator: false,
        msg: message

    });
}

window.notification = notification;

解决它。我需要添加window.notification = notification，以便我可以随处调用它。

Answer 3

最好避免把东西放在窗口。

看起来你正在使用Vue和webpack。如果你不是，那么这将不起作用。如果您愿意，最好使用ES6模块，以确保您可以访问所需的东西。

在notification.js文件中：

export default user

然后你可以打电话

import notification from 'notification'

来自其他js文件的Javascript（Vue）调用函数返回undefined

3 个答案: