Vue.js 错误：根元素之外的文本“{{msg}}”将被忽略

Question

我想访问我的模板中的

{{ msg }}

。在vuejs中如何实现这一点？我的 webpack 观察器出现错误“ - 根元素之外的文本“{{msg}}”将被忽略。”

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

Answer 1

Vue 中的模板必须有一个

single

根元素。模板中的代码应如下所示：

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

注意包装

div

。它不一定是

div

，但需要有 one 包含元素。