I'm currently working on an application that reveals a hidden div when the text "Create Test" is clicked. Everything works well when the code isn't placed inside the template of a component. This seems strange to me, what could be causing this issue? I really want to use a template as I plan to reuse the code.
Check out this example (using regular HTML + vue.js) to see how I expect it to work: https://jsfiddle.net/Lrwfssn1/7/
HTML
<div id="testContainer">
<div id="teacherMain">
<h2>Welcome to the</h2>
<h1> PRO Test Application</h1>
</div>
<test></test>
</div>
Vue.js
Vue.component('test', {
template: `
<div id="tCreateTest">
<div id="createTestContainer" @click="seen = !seen">
<h2>Create</h2>
<h1 id="testH1">Test</h1>
<div class="text-left">
<div class="col-sm-10 form-group-lg">
<div v-if="seen" id="testDetails">
<form class="form-group">
<label id="titleLabel" class="form-control-label" for="titleInput">Enter title:</label>
<input type="text" class="form-control form-control" id="titleInput"
placeholder="Title">
</form>
<button class="btn btn-outline-success" id="submitTitle" onclick="testDetails()" type="submit">
Submit
</button>
</div>
</div>
</div>
</div>
</div>
`,
});
new Vue({
el: '#tCreateTest',
data: {
seen: true
}
});