[Vue warn]: Property "______" was accessed during render but is not defined on instance

Viewed 650

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

0 Answers
Related