• 0

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

أحاول استخدام Vue JS في مشروع بلارافيل، ولكن عند قيامي بالأمر:

$ npm run watch

يظهر لدي الخطأ التالي:

error in ./resources/assets/js/components/File.vue

(Emitted value instead of an instance of Error) Vue template syntax error:

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.

@ ./resources/assets/js/components/AvatarUpload.vue 5:2-181 @ ./resources/assets/js/app.js @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss"

وحتى عند عمل build لا يتم بناء المشروع. كيف يمكنني حل المشكلة؟

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 1

إن الخطأ 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>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
  • 0

مرحباً 

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

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>

 

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن