Vue开发联系表单时出现渲染属性未在实例定义报错求解

报错原因排查 #

• 多独立Vue实例嵌套导致作用域隔离
  你通过Vue.createApp()创建了3个完全独立的Vue应用实例，分别挂载到嵌套的DOM节点#contact-titles、#contact-form-inputs、#select-list上，不同实例之间的data、方法完全不互通，无法互相访问对方的属性：

外层#contact-titles实例定义的name/email_address/select_option等字段，内层的表单、下拉选择实例访问不到；内层实例定义的inputtedName/selected/options等字段，外层也无法识别，渲染时就会提示属性未定义。

• 变量命名不匹配
  你在UserInputs实例的data中定义的邮箱字段是下划线格式inputted_email，但模板v-model绑定、校验方法中用的是驼峰格式inputtedEmail，前后命名不一致导致属性找不到。

• HTML结构不规范
  你把<label>标签写在了<select>标签内部，<select>仅支持嵌套<option>/<optgroup>标签，错误的结构会导致属性绑定、渲染逻辑异常。

修复方案 #

建议将整个表单合并为一个Vue实例，不要拆分多个独立应用，修正后代码如下：

修正后JS代码 #

// 合并为单个Vue应用实例
const ContactForm = {
  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:',
      // 表单输入相关
      inputtedName: '',
      inputtedEmail: '', // 统一命名为驼峰
      inputtedMessage: '',
      // 下拉选择相关
      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() {
      if (this.inputtedName === '' || this.inputtedEmail === '' || this.inputtedMessage === '') {
        alert("Please input in all the fields");
      }
    }
  }
}

Vue.createApp(ContactForm).mount('#contact-form')

修正后HTML代码 #

<!-- 单个挂载容器 -->
<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="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">
      <!-- label移到select外面 -->
      <label for="list">{{select_option}}</label> <br>
      <select v-model="selected" id="list">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
      </select>
    </div>
  </div>
</div>

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