Vue使用v-model开发联系页报错属性未定义如何解决

• 你创建了多个独立的Vue实例挂载到了嵌套的DOM节点上，不同Vue实例的数据完全隔离，无法互相访问
• 你的表单DOM结构为 #contact-titles（最外层表单容器）> #contact-form-inputs（输入区）> #select-list（下拉框），三个独立Vue实例分别挂载在这三个嵌套节点上。上层实例渲染时会先解析自身范围内所有模板语法，包括属于下层实例的变量，找不到对应属性就会抛出报错。

你不需要拆分这么多独立实例，把表单相关的所有数据、方法都合并到同一个实例挂载到表单最外层即可，导航相关的独立实例不受影响（因为它们的挂载节点和表单节点不嵌套）。

第一步：修改contact.js代码 #

删除原来的ContactTitles、UserInputs、下拉选择三个独立实例的代码，替换为合并后的单个实例：

// --------------- 合并后的表单实例 ---------------
const ContactForm = {
    data() {
        return {
            // 原ContactTitles的内容
            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:',
            // 原UserInputs的内容
            inputted_name: '',
            inputted_email: '',
            inputted_message: '',
            // 原下拉选择实例的内容
            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' }
            ]
        }   
    },
    methods: {
        checkInput: function () {
            if (this.inputted_name === '' || this.inputted_email === '' || this.inputted_message === '') 
            {
                alert("Please input in all the fields");
            }
        }
    }
}
Vue.createApp(ContactForm).mount('#contact-form')

其他导航、页面标题相关的实例代码保留不用动。

第二步：修改HTML代码 #

把最外层表单容器的ID从contact-titles改成contact-form，删掉内部多余的挂载ID，同时修正不符合规范的label位置：

<div class="form_container" id="contact-form">
    <div class="form_inputs">
        <!--Name input-->
        <div class="input_container">
            <label for="nameInput">{{name}}</label> <br>
            <input id="nameInput" type="text" v-model="inputted_name" 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="inputted_email" placeholder="example@gmail.com">
        </div>
        <br>

        <!--Selection list-->
        <div class="select_container">
            <label>{{select_option}}</label> <br>
            <select v-model="selected">
                <option v-for="option in options" :value="option.value" :key="option.value">{{option.text}}</option>
            </select>
        </div>
    </div>
</div>

修正说明：原来的label标签放在了select内部，不符合HTML规范，这里移到select外面，同时给v-for加了key属性避免Vue警告。

修改完成后所有表单相关的变量都在同一个实例作用域内，就不会再出现找不到属性的报错了。

内容的提问来源于stack exchange，提问作者dwayne_d11