Nuxt-模板根仅需要一个元素

Question

我最近在一个基于Nuxt的项目中更新了一些依赖关系，我有一个开发人员为我工作（我是一个具有非常基本的JS / vue知识库的设计人员）。现在，该构建会弹出“模板根目录仅需要一个元素”错误。通过搜索其他线程，我可以看到需要更改的原理（将所有内容包含在一个元素中），但是我不确定如何使用此文件的特定结构（v-if排列）来执行此操作。我在下面列出了有问题的文件，想知道是否有人可以指出我正确的方向？非常感谢！

<template>
  <nuxt-link
    v-if="to"
    :class="classes"
    :to="to"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </nuxt-link>

  <a
    v-else-if="href"
    :class="classes"
    :href="href"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </a>

  <button
    v-else
    :class="classes"
    :type="type"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </button>
</template>

<script>
export default {
  name: 'BaseButton',
  props: {
    block: {
      type: Boolean,
      default: false
    },
    variant: {
      type: String,
      default: () => {}
    },
    href: {
      type: String,
      default: () => {}
    },
    to: {
      type: String,
      default: () => {}
    },
    type: {
      type: String,
      default: () => {}
    }
  },
  computed: {
    inheritedProps () {
      return {
        ...this.$props,
        ...this.$attrs
      }
    },
    classes () {
      return [
        'btn',
        {
          'btn--block': this.block
        }
      ].concat(this.modifiers)
    },
    modifiers () {
      const modifiersArray = this.variant && this.variant.split(' ')
      return this.variant ? modifiersArray.map(modifier => `btn--${modifier}`) : false
    }
  }
}
</script>

Answer 1

您应该将模板下的所有内容包装到根目录tag中，例如，我已经使用div将模板下的所有html内容包装了。您可以根据需要使用其他任何tag。

您可以使用以下解决方案

<template>
<div>
  <nuxt-link
    v-if="to"
    :class="classes"
    :to="to"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </nuxt-link>

  <a
    v-else-if="href"
    :class="classes"
    :href="href"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </a>

  <button
    v-else
    :class="classes"
    :type="type"
    v-bind="inheritedProps"
    v-on="$listeners"
  >
    <slot />
  </button>
</div>
</template>