CODEWITHSUNDEEP
vue.js
Taylorsuk
Taylorsuk

Reputation: 1449

Adding html to Vue component template breaks it

I am using the following code as a Vue component in order to register it in the root component. 

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>
  `
};

This renders fine and works as a form, however I have been trying to add an error section to the top. When ever I add any HTML to the top of this template code (i.e. between the <div> and the <form>) it breaks the whole thing and it doesn't render.

Upvotes: 0

Views: 129

Answers (1)

Quentin
Quentin

Reputation: 3289

This is because you have an end label tag which has no start tag.

<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>

Upvotes: 1

Related Questions