خطأ Vue js: Component template should contain exactly one root element

Mahmoud Alrashidi · 22 مارس 2021

لا أعرف ما هو الخطأ ، حتى الآن أقوم باختبار من خلال console log :عندما أقوم بتشغيل npm run watch ، أتلقى الخطأ التالي:

"Webpack is watching the files…

95% emitting

ERROR Failed to compile with 1 errors
19:42:29

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"

ملف vue الخاص بي:

<template>
        <div class="form-group">
            <label for="avatar" class="control-label">Avatar</label>
            <input type="file" v-on:change="fileChange" id="avatar">
            <div class="help-block">
                Help block here updated 4 🍸 ...
            </div>
        </div>

        <div class="col-md-6">
            <input type="hidden" name="avatar_id">
            <img class="avatar" title="Current avatar">
        </div>
</template>

<script>
    export default{
        methods: {
            fileChange(){
                console.log('Test of file input change')
            }
        }
    }
</script>

كيف يُمكنني حل هذه المُشكلة؟

تم التعديل في 22 مارس 2021 بواسطة كمال محمودي

محمد أيت لعرايك · 22 مارس 2021

لديك عنصرين أساسيين في القالب template الخاص بك.

<template>
        <div class="form-group">
            <label for="avatar" class="control-label">Avatar</label>
            <input type="file" v-on:change="fileChange" id="avatar">
            <div class="help-block">
                Help block here updated 4 🍸 ...
            </div>
        </div>

        <div class="col-md-6">
            <input type="hidden" name="avatar_id">
            <img class="avatar" title="Current avatar">
        </div>
</template>

و هدا خطا القالب template يجب أن يكون عنصر واحد, ولحل هذه المشكلة يكفي وضع <div> يحتوي جميع العناصر , على الشكل التالي:

<template>
   <div>  <!--إضافة عنصر جديد هنا -->
     
       <div class="form-group">
            <label for="avatar" class="control-label">Avatar</label>
            <input type="file" v-on:change="fileChange" id="avatar">
            <div class="help-block">
                Help block here updated 4 🍸 ...
            </div>
        </div>

        <div class="col-md-6">
            <input type="hidden" name="avatar_id">
            <img class="avatar" title="Current avatar">
        </div> 
     
  </div>  
</template>

إسلام عبدالعزيز · 23 مارس 2021

المكونات متعددة الجذور غير مدعومة في Vue الإصدار 2.

في الإصدار 3، يمكن أن تحتوي المكونات على جذور متعددة!

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

<template>
	<!-- .هذا هو عنصر الجذر حيث يمكن أن يدخل كل شيء بداخله -->
	<div></div>
</template>

<template>
	<!-- .هذا لن ينجح ، لأن هناك عنصرين جذر -->
	<div></div>
	<div></div>
</template>

خطأ Vue js: Component template should contain exactly one root element

السؤال

Mahmoud Alrashidi

2 أجوبة على هذا السؤال

Recommended Posts

محمد أيت لعرايك

إسلام عبدالعزيز

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية