Vue.js组件多根元素报错，求修复方法

错误原因 #

你的Vue组件模板违反了必须只有一个根元素的规则，当前模板里同时存在<input>和<p>两个同级根元素，这在Vue 2中是不允许的，同时你的ESLint规则也对此做了限制。

修复方法 #

方法1：用容器元素包裹所有子元素（推荐，兼容Vue 2/3） #

修改App.vue的模板部分，添加一个<div>（或其他块级容器）作为唯一根元素：

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <div>
    <input :value="text" @input="onInput" placeholder="Type here">
    <p>{{ text }}</p>
  </div>
</template>

方法2：Vue 3专属（需调整ESLint规则） #

如果你的项目是基于Vue 3创建的，Vue 3原生支持多根元素（Fragment），但需要关闭对应的ESLint限制：

1. 修改模板（无需包裹容器）：

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  methods: {
    onInput(e) {
      this.text = e.target.value
    }
  }
}
</script>

<template>
  <input :value="text" @input="onInput" placeholder="Type here">
  <p>{{ text }}</p>
</template>

2. 在项目根目录的.eslintrc.js中关闭规则：

module.exports = {
  // ...其他已有配置
  rules: {
    'vue/no-multiple-template-root': 'off'
  }
}

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