vue-step-wizard
vue-step-wizard copied to clipboard
Published
20 hours ago •
tushargugnani
tushargugnani
Events not working
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/[email protected]/dist/vue-step-wizard.css">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver"></script>
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://unpkg.com/[email protected]/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".
