Javascript (Vue) call function from other js file return undefined

Question

I want to call my notification function from other JS file but it always return 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>

Every time price > currentPoint get called it always return me Uncaught ReferenceError: notification is not defined.

I compile it using LaravelMix.

Any solution?

Your notification method does not have any return statement. So it returns undefined — Frnak
– Frnak, Commented Mar 6, 2017 at 7:45

ssuhat · Accepted Answer · 2017-03-06 08:44:57Z

1

notification.js

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

    });
}

window.notification = notification;

Solve it. I need to add window.notification = notification so I can call it everywhere.

answered Mar 6, 2017 at 8:44

ssuhat

7,70621 gold badges68 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh · Accepted Answer · 2017-03-06 07:48:30Z

0

It seems you just need to do following in your HTML:

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

answered Mar 6, 2017 at 7:48

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

1 Comment

ssuhat Over a year ago

I use Laravel. My code will render exactly the same like yours

MGDavies · Accepted Answer · 2017-07-19 17:07:04Z

0

it's better to avoid putting things in window.

It looks like you're using the Vue with webpack. If you're not, then this won't work. If you are, you're better off using ES6 modules to make sure you have access to things where you need them.

Within your notification.js file:

export default user

Which you can then call on

import notification from 'notification'

answered Jul 19, 2017 at 17:07

MGDavies

1,0543 gold badges17 silver badges30 bronze badges

Collectives™ on Stack Overflow

Javascript (Vue) call function from other js file return undefined

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related