CODEWITHSUNDEEP
vue.js
Edyl I. Templado
Edyl I. Templado

Reputation: 63

Vue.js Error: text "{{msg}}" outside root element will be ignored

I want to access {{ msg }} inside my template. How can achieve this in vuejs? My webpack watcher is having an error " - text "{{msg}}" outside root element will be ignored."

<template>
    {{msg}}
    <form action="post" enctype="multipart/form-data" v-on:submit.prevent="addPension">
       <button type="submit" class="btn btn-success">submit </button>
   </form>
</template>

<script>
  export default {
    data: () => ({
        msg: 'new messages'
    })
  }
</script>

Upvotes: 1

Views: 1120

Answers (1)

Bert
Bert

Reputation: 82439

Templates in Vue must have a single root element. The code in your template should look like this:

<template>
  <div>
    {{msg}}
    <form action="post" enctype="multipart/form-data" v-on:submit.prevent="addPension">
      <button type="submit" class="btn btn-success">submit </button>
    </form>
  </div>
</template>

Note the wrapping div. It doesn't have to be a div, but there needs to be one containing element.

Upvotes: 5

Related Questions