Vue3报错Property was accessed during render but is not defined on instance修复求助

云原生阿岚

2026-10-3

问题根因

你遇到的Property "" was accessed during render but is not defined on instance报错，核心原因是将互相嵌套的DOM节点分别挂载了独立的Vue3实例：Vue实例只能访问自身定义的data属性，嵌套在内部的子实例无法读取父实例的属性，模板调用不存在的属性就会触发报错，一共有4处错误点：

错误1：表单外层容器#contact-titles对应ContactTitles实例，内部嵌套了#contact-form-inputs对应UserInputs实例，UserInputs实例没有定义name、email_address属性，但模板里写了{{name}}、{{email_address}}，无法识别触发报错。
错误2：#contact-form-inputs内部又嵌套了#select-list对应下拉框实例，下拉框实例没有定义select_option属性，模板里的{{select_option}}无法识别触发报错。
错误3：HTML结构不规范，你把<label>标签写在了<select>标签内部，<select>内仅允许放置<option>或<optgroup>标签，错误的结构会导致模板解析异常，触发属性识别错误。
错误4：你为每个极小的模块单独创建Vue实例的写法不符合Vue3的使用规范，多个实例完全隔离无法共享状态，后续开发表单提交等联动功能也会无法实现。

修复方案

推荐将所有表单相关的逻辑合并到同一个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，把label移到select外部，同时补上你漏掉的inputted_message对应的留言输入框：

<!-- 表单外层容器修改为单个实例的挂载节点，删除原有多余id -->
<div class="form_container" id = "contact-form">
    <div class = "form_inputs">
            <!-- 姓名输入 -->
            <div class="input_container">
                <label for="nameInput">{{name}}</label> <br>
                <input id="nameInput" type="text" v-model="inputted_name" placeholder="Enter name">
            </div>
            <br>

            <!-- 邮箱输入 -->
            <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>

            <!-- 下拉选择框，修正label位置，删除原有select-list id -->
            <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>
            <br>
            <!-- 补上遗漏的留言输入框，对应inputted_message属性 -->
            <div class="input_container">
                <label for="msgInput">留言</label> <br>
                <textarea id="msgInput" v-model="inputted_message" placeholder="请输入你的留言内容"></textarea>
            </div>
    </div>
</div>

修改完成后所有表单属性都在同一个实例内可访问，错误就会消失，导航、页面标题等平级不嵌套的实例可以正常保留无需修改。

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