javascript - ভ্যু জেএস ত্রুটি: উপাদান টেমপ্লেটে ঠিক একটি মূল উপাদান থাকা উচিত



node.js laravel (4)

আপনাকে সমস্ত এইচটিএমএলকে একটি একক উপাদানে আবদ্ধ করতে হবে।

<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>

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

ত্রুটিটি কী তা আমি জানি না, এখন পর্যন্ত আমি কোনও ফাইল (আপলোড করার জন্য) নির্বাচনের পরে পরিবর্তনগুলি পরীক্ষা করার জন্য কনসোল লগের মাধ্যমে পরীক্ষা করছি।

আমি যখন $ npm run watch , তখন আমি নিম্নলিখিত ত্রুটিটি পাই:

"ওয়েবপ্যাক ফাইলগুলি দেখছে ...

95% নির্গমন

ত্রুটি 1 টি ত্রুটি দিয়ে সংকলন করতে ব্যর্থ
19:42:29

। / রিসোর্স / এ্যাসেটস / জেএস / কম্পোনেন্টস / ফাইল.ভয়েতে ত্রুটি

(ত্রুটির উদাহরণের পরিবর্তে নির্গত মান) ভের্য টেম্পলেট সিনট্যাক্স ত্রুটি:

উপাদান টেমপ্লেটে ঠিক একটি মূল উপাদান থাকা উচিত। আপনি যদি একাধিক উপাদানগুলিতে ভি-ইফ ব্যবহার করে থাকেন তবে পরিবর্তে তাদের শৃঙ্খলাবদ্ধ করতে ভি-অন্য-যদি ব্যবহার করুন।

@। / রিসোর্স / এসেটস / জেএস / কম্পোনেন্টস / অ্যাভাতারআপলোড.ভ্যু 5: 2-181 @। / রিসোর্স / এসেটস / জেএস / অ্যাপ.জেএস @ মাল্টি। / রিসোর্স / এসেটস / জেএস / অ্যাপ.জেএস। / রিসোর্সেস / এসেটস / Sass / app.scss "

আমার ফাইল.ভ্যু হ'ল

<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>

কোন ধারনা কিভাবে এই সমস্যা সমাধানের? আসলে ত্রুটি কী?


Answer #1

আপনার টেম্পলেটে দুটি মূল উপাদান রয়েছে।

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

এবং আপনার একটি প্রয়োজন।

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

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

মূলত ভ্যুতে আপনার টেম্পলেটগুলিতে একটি মাত্র মূল উপাদান থাকতে হবে


Answer #2

আরও সম্পূর্ণ উত্তরের জন্য: http://www.compulsivecoders.com/tech/vuejs-component-template-should-contain-exactly-one-root-element/

তবে মূলত:

  • বর্তমানে, কোনও ভ্যুজেএস টেমপ্লেটে কেবল একটি মূল উপাদান থাকতে পারে (কারণ ইস্যু করার কারণে)
  • ক্ষেত্রে আপনার কাছে দুটি মূল উপাদান থাকা দরকার কারণ এইচটিএমএল কাঠামো আপনাকে মোড়কের প্যারেন্ট এলিমেন্ট তৈরি করতে দেয় না, আপনি vue-fragment ব্যবহার করতে পারেন।

এটি ইনস্টল করতে:

npm install vue-fragment

এটি ব্যবহার করতে:

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

// or

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

তারপরে, আপনার উপাদানটিতে:

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

Answer #3

উপাদান টেমপ্লেটে ঠিক একটি মূল উপাদান থাকা উচিত। আপনি যদি একাধিক উপাদানগুলিতে ভি-ইফ ব্যবহার করে থাকেন তবে পরিবর্তে তাদের শৃঙ্খলাবদ্ধ করতে ভি-অন্য-যদি ব্যবহার করুন।

সঠিক পন্থা হয়

<template>
  <div> <!-- The root -->
    <p></p> 
    <p></p>
  </div>
</template>

ভুল পদ্ধতির

<template> <!-- No root Element -->
    <p></p> 
    <p></p>
</template>

মাল্টি রুট উপাদান

সমস্যাটির চারপাশের উপায় কার্যকরী উপাদানগুলি ব্যবহার করা হচ্ছে, সেগুলি এমন উপাদান যেখানে আপনাকে কোনও প্রতিক্রিয়াশীল ডেটা পাস করতে হবে না মানে প্যারেন্ট উপাদানগুলির কিছু পরিবর্তন হওয়ার সাথে সাথে উপাদান কোনও ডেটা পরিবর্তনের জন্য তদারকি করবে না এবং পাশাপাশি এটি আপডেটও করবে না।

এটি চারপাশের একটি কাজ হিসাবে এটি মূল্য নিয়ে আসে, ক্রিয়ামূলক উপাদানগুলির কাছে কোনও জীবনচক্র হুক থাকে না, এগুলি উদাহরণস্বরূপ কম হয় তবে আপনি this আর উল্লেখ করতে পারবেন না এবং সবকিছু প্রসঙ্গে প্রেরণ করা হবে passed

আপনি কীভাবে একটি সাধারণ কার্যকরী উপাদান তৈরি করতে পারেন তা এখানে।

Vue.component('my-component', {
    // you must set functional as true
  functional: true,
  // Props are optional
  props: {
    // ...
  },
  // To compensate for the lack of an instance,
  // we are now provided a 2nd context argument.
  render: function (createElement, context) {
    // ...
  }
})

এখন যেহেতু আমরা কয়েকটি বিশদে ফাংশনাল উপাদানগুলি কভার করেছি তাতে মাল্ট রুট উপাদানগুলি কীভাবে তৈরি করা যায় তা কভার করতে দেয়, এর জন্য আমি আপনাকে একটি জেনেরিক উদাহরণ দিয়ে হাজির করব।

<template>
 <ul>
     <NavBarRoutes :routes="persistentNavRoutes"/>
     <NavBarRoutes v-if="loggedIn" :routes="loggedInNavRoutes" />
     <NavBarRoutes v-else :routes="loggedOutNavRoutes" />
 </ul>
</template>

এখন যদি আমরা নাভবাররোটস টেমপ্লেটটি একবার দেখে নিই

<template>
 <li
 v-for="route in routes"
 :key="route.name"
 >
 <router-link :to="route">
 {{ route.title }}
 </router-link>
 </li>
</template>

আমরা এরকম কিছু করতে পারি না আমরা একক রুট উপাদান সীমাবদ্ধতা লঙ্ঘন করব

সমাধান এই উপাদানটিকে কার্যকরী করুন এবং রেন্ডার ব্যবহার করুন

{
functional: true,
render(h, { props }) {
 return props.routes.map(route =>
  <li key={route.name}>
    <router-link to={route}>
      {route.title}
    </router-link>
  </li>
 )
}

এখানে আপনি এটি একটি বহু মূল উপাদান, হ্যাপি কোডিং তৈরি করেছেন

আরও তথ্যের জন্য রেফারেন্স দেখুন: https://blog.carbonteq.com/vuejs-create-multi-root-components/