search

tushargugnani / vue-step-wizard

A simple VueJS Step / Form Wizard plugin with Validation Support.
MIT License
118 stars 29 forks source link

Events not working #57

Open macklus opened 10 months ago

macklus commented 10 months ago

I'm using version 2.7.16, with code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>

    <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://unpkg.com/vue-step-wizard@0.1.17/dist/vue-step-wizard.css">

    <script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
    <script src="https://unpkg.com/vue@2.7.16/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@0.23.0/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-step-wizard@0.1.17/dist/vue-step-wizard.umd.js"></script>
</head>

<body>
    <div id="app">
<template>
    <form-wizard @onNextStep="onnextstep" @onPreviousStep="onpreviousstep"
        @onComplete="oncomplete">
        <tab-content title="Step 1" :selected="true">
             Step 1
        </tab-content>
        <tab-content title="Step 2">
            Step 2
        </tab-content>
        <tab-content title="Step 3">
            Step 3
        </tab-content>
        <tab-content title="Step 4">
            Step 4
        </tab-content>
    </form-wizard>
</template>
<script>
    new Vue({
        el: '#app',
        delimiters: ["[[", "]]"],
        data: {
            steps: ['Step 1', 'Step 2', 'Step 3'],
            activeStep: 1,
        },
        methods: {
            onComplete() {
                console.log("onComplete");
            },
            onnextstep: function () {
                console.log("Next step");
                console.log(this.activeStep);
            },
            onpreviousstep: function () {
                console.log("Previous step");
                console.log(this.activeStep);
            },
            oncomplete: function () {
                console.log("SUBMIT !!");
            }
        },
    });
</script>
    </div>
</body>

</html>

but events don't fired their required functions.

Plus, a warning message appears on browser: 

vue.js:5134 [Vue tip]: Event "oncomplete" is emitted in component <FormWizard> but the handler is registered for "onComplete". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "on-complete" instead of "onComplete".