I am currently teaching myself Vue to create a Contact form for a 'mock up' website in order to teach myself user inputs. However I keep getting the same error for multiple cases
//--------------- FORM TITLES ---------------
// Vue object: Titles
const ContactTitles = {
data() {
return {
main_title: 'Contact Us',
name: 'Name',
email_address: 'Email Address',
select_option: 'What is your enquiry about?',
checkboxes: 'Please click on each wrestling company you know:'
}
}
}
Vue.createApp(ContactTitles).mount('#contact-titles')
//--------------- FORM INPUTS ---------------
// Vue object: Inputs
var UserInputs = {
data() {
return {
inputtedName: '',
inputted_email: '',
inputtedMessage: ''
}
},
methods: {
checkInput: function () {
if (this.inputtedName === '' || this.inputtedEmail === '' || this.inputtedMessage === '')
{
alert("Please input in all the fields");
}
}
}
}
Vue.createApp(UserInputs).mount('#contact-form-inputs')
// Vue instance: Select options
Vue.createApp({
data() {
return {
selected: 'None',
options: [
{ text: 'Booking enquiry', value: 'Booking' },
{ text: 'Website improvement', value: 'Website' },
{ text: 'Item enquiry', value: 'Item' },
{ text: 'Previous experiences', value: 'Experience' },
{ text: 'Career opportunity', value: 'Career' }
]
}
}
}).mount('#select-list')
<div class="form_container" id = "contact-titles">
<div class = "form_inputs" id = "contact-form-inputs">
<!--Name input-->
<div class="input_container">
<label for="nameInput">{{name}}</label> <br>
<input id="nameInput" type="text" v-model="inputtedName" placeholder="Enter name">
</div>
<br>
<!--Email input-->
<div class="input_container">
<label for="emailInput">{{email_address}}</label> <br>
<input id="emailInput" type="text" v-model="inputtedEmail" placeholder="example@gmail.com">
</div>
<br>
<!--Selection list-->
<div class="select_container" id = "select-list">
<select v-model="selected">
<label for = "list">{{select_option}}</label> <br>
<option id = "list" v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
</select>
</div>
</div>
</div>
It has the error for inputtedName, inputtedEmail, options and selected, as it states that:
"[Vue warn]: Property "______" was accessed during render but is not defined on instance"
Hopefully another pair of eyes can help me figure out why it is saying these elements are not defined, thanks