Vue.js中Failed to resolve component: Label错误的解决求助

核心错误修复 #

控制台出现的「Failed to resolve component: Label」是因为你使用了大写的<Label>标签。在Vue中，首字母大写的标签会被识别为自定义Vue组件，而原生HTML的标签是全小写的<label>。你代码里有两处大写的<Label>：

<!-- 错误写法 -->
<Label for="country">Country</Label>
<Label for="jib-location">Job Locations</Label>

改成全小写的<label>即可解决这个组件解析错误：

<!-- 正确写法 -->
<label for="country">Country</label>
<label for="job-location">Job Locations</label>

其他影响表单数据获取的问题修复 #

除了上述错误，你的代码还有几处细节问题，会导致无法正常获取表单数据：

1. Radio按钮的for属性绑定错误 #

所有radio对应的<label>都错误绑定了for="0-2"，点击label时只会选中第一个radio，修正为对应radio的id：

<!-- 修正前 -->
<input type="radio" value="3-5" id="3-5" v-model="formvalues.yearsofexprience">
<label for="0-2" >3-5</label>

<!-- 修正后 -->
<input type="radio" value="3-5" id="3-5" v-model="formvalues.yearsofexprience">
<label for="3-5" >3-5</label>

同理，6-10和10+对应的label也要修改for属性值为各自的id。

2. 拼写错误与字段类型问题 #

• 单词拼写错误：remortwork改为remotework（包括input的id和v-model字段名），jib-location改为job-location；
• Radio字段类型错误：yearsofexprience是单选字段，JS中初始值应该是字符串而非数组，改为yearsofexprience: ''；
• 建议字段名采用驼峰命名：比如profilesummery改为profileSummary，yearsofexprience改为yearsOfExperience，符合Vue开发的命名规范。

修正后的完整代码 #

HTML部分 #

<form v-on:submit="submitform">
    <div>
      <label for="name">Name</label>
      <input type="text" id="name" v-model="formvalues.name1">
    </div>
    <div>
      <label for="profile">Profile Summary</label>
      <textarea id="profile" v-model="formvalues.profileSummary"></textarea>
    </div>

    <div>
      <label for="country">Country</label>
      <select id="country" v-model="formvalues.country">
        <option value="">Select a Country</option>
        <option value="india">India</option>
        <option value="dubai">Dubai</option>
        <option value="uk">UK</option>
      </select>
    </div>

    <div>
      <label for="job-location">Job Locations</label>
      <select id="job-location" multiple v-model="formvalues.jobLocation">
        <option value="india">India</option>
        <option value="dubai">Dubai</option>
        <option value="uk">UK</option>
      </select>
    </div>

    <div>
      <input type="checkbox" name="" id="remotework" true-value="yes" false-value="no" v-model="formvalues.remotework">
      <label for="remotework">Open for remote work?</label>
    </div>

    <div>
      <label for="">Skill Set</label>
      <input type="checkbox" id="html" value="html" v-model="formvalues.skillset">
      <label for="html">HTML</label>
      <input type="checkbox" id="css" value="css" v-model="formvalues.skillset">
      <label for="css">CSS</label>
      <input type="checkbox" id="javascript" value="javascript" v-model="formvalues.skillset">
      <label for="javascript">Javascript</label>
    </div>

    <div>
      <label for="">Years of Experience</label>
      <input type="radio" value="0-2" id="0-2" v-model="formvalues.yearsOfExperience">
      <label for="0-2" >0-2</label>
      <input type="radio" value="3-5" id="3-5" v-model="formvalues.yearsOfExperience">
      <label for="3-5" >3-5</label>
      <input type="radio" value="6-10" id="6-10" v-model="formvalues.yearsOfExperience">
      <label for="6-10" >6-10</label>
      <input type="radio" value="10+" id="10+" v-model="formvalues.yearsOfExperience">
      <label for="10+" >10+</label>
    </div>
    <button type="submit">Submit</button>
  </form>

JS部分 #

formvalues: {
        name1: '',
        profileSummary: '',
        country: '',
        jobLocation: [],
        remotework: "no",
        skillset:[],
        yearsOfExperience: ''
      }

完成以上修改后，组件解析错误会消失，表单数据也能正常获取并在控制台打印。

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