On my authentication page, I have implemented a checkbox that I want to use to toggle between Sign Up and Sign In forms. When the checkbox is clicked, it should display the Sign Up form, and when it's unchecked, it should show the Sign In form.
I found an example on Stack Overflow which I followed. Here is the code snippet within my HTML tag:
<div id='#selector'>
<div class="container">
<label class="bs-switch">
Already have an account
<input type="checkbox" v-model="checked">
<span class="slider round"></span>
</label>
<div class="row" v-if="checked">
</div>
</div>
</div>
The above code uses Bootstrap CSS for styling but only includes the structure of the forms without the full content.
Then, in my script tag:
import Vue from 'vue'
var app = new Vue({
el: '#selector',
data: {
checked: false
}
});
Although the checkbox renders correctly, the Sign In card is not displaying as intended. The error messages I'm receiving are:
Property or method "checked" is not defined on the instance but referenced during render.
and
"export 'default' (imported as 'vue_script') was not found in '!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./Auth.vue'
I'm unsure what I am missing here. Any insights would be greatly appreciated.