خطأ Vue template syntax error في لارافيل

إن الخطأ Component template should contain exactly one root element يظهر فقط عندما يتم استخدام أكثر من عنصر على مستوى الجذر ضمن الصفحة الواحدة أو المكوّن الواحد.

في حال كنت تستخدم نسخة Vue 2.0 فيوجد قيد على العنصر الجذر ضمن الصفحة أو المكوّن، وهو بأن يكون عنصر واحد فقط، على الشكل التالي:

<div>
    <div class="form-group">
      ...
    </div>

    <div class="col-md-6">
      ...
    </div>
</div>

بدلاً من أن يكون أكثر من عنصر على مستوى الجذر في المكوّن أو الصفحة الواحدة، أي على الشكل التالي:

<div class="form-group">
  ...
</div>
<div class="col-md-6">
  ...
</div>

//-> سيسبب خطأ

ولكن تم إزالة هذا القيد في النسخة الجديدة من Vue 3.0 وأصبح بالإمكان استخدام أكثر من عنصر على مستوى الجذر في الملف أو المكون الواحد.

يوجد أيضاً حل آخر باستخدام إضافة: vue-fragment ، يتم تحميلها كالتالي:

npm install vue-fragment

ولاستخدامها نقوم بتضمنيها كالتالي:

import Fragment from 'vue-fragment';
Vue.use(Fragment.Plugin);

// or

import { Plugin } from 'vue-fragment';
Vue.use(Plugin);

ثم يمكننا وضع أكثر من عنصر ضمن الـ fragment:

<template>
  <fragment>
    <tr class="hola">
      ...
    </tr>
    <tr class="hello">
      ...
    </tr>
  </fragment>
</template>

هل يمكنك تصوير ملف File.vue ؟

مرحباً 

يخبرك الخطأ بالتالي:
 

Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

لديك في أحد ملفات العناصر (الكائنات component) عنصرا فيه أكثر من عنصر داخل وسم ال template 

لذلك قم بالتاكد من وجود عنصر ابن واحد فقط داخل وسم ال template ، ثم ضع بقية العناصر التي تريدها بداخل هذا الابن مهما كان عددها.

مثلا هذا الكود سيعطيك خطأ:

<template>
        <div class="">
          
        </div>

        <div class="">
          
        </div>
</template>

ولتصحيحه قم بوضع عنصر ابن واحد داخل template كالتالي:

<template>
        <div class="">
          
            <div class="">

            </div>
          
            <div class="">

            </div>
          
        </div>
</template>