TerryZ / v-dialogs

A simple style useful dialog component collection for Vue
https://terryz.github.io/docs-vue3/dialog/
MIT License
130 stars 27 forks source link

Installation and config problems #9

Closed connecteev closed 5 years ago

connecteev commented 5 years ago

Trying to get a basic POC working in my Laravel app. What am I doing wrong?

blade file:


            <div id="app" class="content">
                <div class="title m-b-md">
                    Laravel
                </div>
            </div>
        <script src="/js/app.js"></script>

app.js:


require('./bootstrap');
window.Vue = require('vue');
import vDialogs from 'v-dialogs';
Vue.use(vDialogs, { });
Vue.component('vDialogs', vDialogs);

const app = new Vue({
    el: '#app',
    mounted: function() {
        console.log('mounted');
    },
    methods: {
        show() {
            console.log('show');
            //show message with close callback and options
            this.alert('Data saved successfully!', function(){
                //dialog close callback
            }, {
                messageType: 'success',
                language: 'en'
            });

        }
    }
});

app.show();

Calling app.show() gives an error in console. What am I doing wrong?

app.js:49382 Uncaught TypeError: this.alert is not a function
    at Vue.show (app.js:49382)
    at Module../resources/js/app.js (app.js:49390)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:49539)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87
TerryZ commented 5 years ago

Try this

require('./bootstrap');
import Vue from 'vue';
import vDialogs from 'v-dialogs';
//you can config some options in global scope
Vue.use(vDialogs, {
    language:'en'
});

const app = new Vue({
    el: '#app',
    mounted: function() {
        console.log('mounted');
    },
    methods: {
        show() {
            console.log('show');
            //show message with close callback and options
            this.$dlg.alert('Data saved successfully!',
            function() {
                //dialog close callback
            },
            {
                messageType: 'success',
                language: 'en'
            });
        }
    }
});

app.show();
connecteev commented 5 years ago

That worked. Thank you for the quick response @TerryZ