将html添加到Vue组件模板会破坏它

Question

我使用以下代码作为Vue组件，以便在根组件中注册它。

const RegisterForm = {
  data() {
    return {
      test: 'bonjour',
      user: {
        email: '',
        firstName: 'test',
        lastName: '',
        password: '',
        passwordConfirm: '',
        terms: false,
        receiveUpdates: false
      }
    };
  },
  methods: {
    handleSubmit() {
      const data = this.user;

      if (!isFormValid()) {
        return;
      }

  },
  template: `
  <div>

  <form class="flex flex-col mt-2" @submit.prevent="handleSubmit()">

 <label class="text-xs block mt-6 mb-3" for="firstName">
   First Name
 </label>
  <input v-model="user.firstName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="firstName" id="firstName" value="">

  <label class="text-xs block mt-6 mb-3" for="lastName">
  Last Name
  </label>
      <input v-model="user.lastName" required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="lastName" id="lastName" value="">

  <label class="text-xs block mt-6 mb-3" for="emailAdress">
    Email Address
  </label>
  <input v-model="user.email"required type="text" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="emailAdress" id="emailAdress" value="">

  <label class="text-xs block mt-6 mb-3" for="password">
    Password
  </label>
  <input v-model="user.password" placeholder="Set password for your account" required type="password" class="text-register border-b focus:border-pink font-MuseoSans-medium outline-none pb-4 text-lg focus:outline-none w-full" name="password" id="password" value="">

  <label for="confirmTerms" class="cursor-pointer select-none flex items-start mt-8 mb-3 text-xs leading-none">
    <input v-model="user.terms" type="checkbox" name="confirmTerms" id="confirmTerms" checked class="mr-3 inline-block">
      <span class="flex-auto leading-normal -mt-1">Check this box to agree to our <a class="texspt-pink no-underline" href="#">Terms of Use</a>, <a class="text-pink no-underline" href="#">Privacy Policy</a> and consent to us storing your name and email address as highlighted in our <a class="text-pink no-underline" href="#">GDPR compliance</a>.</span>
  </label>

  <label for="receiveUpdates" class="cursor-pointer select-none flex items-start mt-2 mb-8 text-xs leading-none">
      <input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
        <span class="flex-auto leading-normal -mt-1">We would like to send you emails with tips to help you get started and details on new features.</span>
  </label>

   <button type="submit" class="bg-pink hover:bg-pink-dark flex-none text-white px-4 py-6 rounded text-lg font-MuseoSans-medium" name="button">Sign up</button>

   </form>
 </div>
  `
};

这呈现得很好，可以作为表单使用，但是我一直在尝试在顶部添加一个错误部分。每当我在这个模板代码的顶部(即在<div>和<form>之间)添加任何超文本标记语言时，它会破坏整个代码，并且它不会呈现。

Answer 1

这是因为您有一个没有开始标记的结束label标记。

<div>
  <form class="flex flex-col mt-2" @submit.prevent="handleSubmit()">

    <label class="text-xs block mt-6 mb-3" for="firstName">First Name</label>
    <input v-model="user.firstName" required type="text" class="[...]" name="firstName" id="firstName" value="">

    <label class="text-xs block mt-6 mb-3" for="firstName">Last Name</label>
    <input v-model="user.lastName" required type="text" class="[...]" name="lastName" id="lastName" value="">

    <label class="text-xs block mt-6 mb-3" for="emailAdress">Email Adress</label>
    <input v-model="user.email"required type="text" class="[...]" name="emailAdress" id="emailAdress" value="">

    <label class="text-xs block mt-6 mb-3" for="password">Password</label>
    <input v-model="user.password" placeholder="[...]" required type="password" class="[...]" name="password" id="password" value="">

    <input v-model="user.receiveUpdates" type="checkbox" name="receiveUpdates" id="receiveUpdates" class="mr-3 inline-block">
    <span class="flex-auto leading-normal -mt-1">[...]</span>

    </label <!-- Just here -->

    <button type="submit" class="[...]" name="button">Sign up</button>
  </form>
</div>