[ভ্যু সতর্কতা]: উপাদান খুঁজে পাওয়া যায় না

166

আমি ভয়েজ ব্যবহার করছি । এটি আমার মার্কআপ:

<body>
  <div id="main">
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
  </div>
</body>

এটি আমার কোড:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
})
;

পৃষ্ঠাটি লোড করার পরে আমি এই সতর্কতাটি পাই:

[Vue warn]: Cannot find element: #main

আমি কি ভুল করছি?

javascript mvvm vue.js

— dopatraman
সূত্র

1

পাদলেখ বা শিরোনামে এটি করছেন?

— ক্রিস বেকার

6

আপনার স্ক্রিপ্টটি একটি উইন্ডো প্রস্তুত হ্যান্ডলারে সরান

— অরুণ পি জনি

2

প্রস্তুত হ্যান্ডলারটি বিষয়টি ছিল। নির্বোধ বলে মনে হচ্ছে যে ভ্যু এতে অন্তর্ভুক্ত নেই ... @ অরুনপ জহ্নি - আপনি যদি স্নিপেটের অসুস্থতার চিহ্ন দিয়ে উত্তরটি জমা করেন তবে এটি সঠিক হিসাবে দেখা যায়।

— দোপাট্রামন

317

আমি মনে করি যে সমস্যাটি ডোমটিতে লক্ষ্য ডোম উপাদানটি লোড হওয়ার আগেই আপনার স্ক্রিপ্টটি কার্যকর করা হয়েছে ... এর একটি কারণ হতে পারে আপনি নিজের স্ক্রিপ্টটি পৃষ্ঠার শীর্ষে বা স্ক্রিপ্ট ট্যাগে রেখেছেন যা ডিভ উপাদানটির আগে স্থাপন করা হয়েছে #main। সুতরাং যখন স্ক্রিপ্টটি কার্যকর করা হবে তখন এটি ত্রুটির মতো লক্ষ্য উপাদানটি আবিষ্কার করতে সক্ষম হবে না।

একটি সমাধান হ'ল হ্যান্ডলারের মতো লোড ইভেন্টে আপনার স্ক্রিপ্ট স্থাপন করা

window.onload = function () {
    var main = new Vue({
        el: '#main',
        data: {
            currentActivity: 'home'
        }
    });
}

আরেকটি বাক্য গঠন

window.addEventListener('load', function () {
    //your script
})

— অরুণ পি জনি
সূত্র

4

আরে ধন্যবাদ, এখানে মন্তব্যের জন্য দুঃখিত কেন

— ভ্যু জেএস

9

এছাড়াও লক্ষণীয়, addEventListenerপদ্ধতিটি "প্রযুক্তিগতভাবে" আরও রক্ষণাবেক্ষণযোগ্য পদ্ধতির কারণ এটি বিশ্বব্যাপী window.onloadসম্পত্তিকে ওভাররাইড করে না ।

— জোশিচটক

<head></head>বিভাগে ওয়েবপ্যাক বান্ডিল স্ক্রিপ্ট অন্তর্ভুক্ত করা যা আমার ত্রুটি ঘটায়। উইন্ডোটি লোড হওয়ার জন্য অপেক্ষা করা কাজ করছে।

— আমিন ন্যারি

1

কনসোলে কোনও সতর্কবাণী নেই যে ডিওএম লোড হওয়ার আগে স্ক্রিপ্টের বিবরণগুলিতে ডিওএম উপাদানগুলির উল্লেখ রয়েছে যা মূল্যায়ন করা হচ্ছে? এটি কার্যকর করার জন্য কীভাবে কঠিন সতর্কতা হতে পারে?

— টম রাসেল

70

আমি 'স্ক্রিপ্ট' উপাদানটিতে 'ডিফার' বৈশিষ্ট্য যুক্ত করে সমস্যার সমাধান করেছি।

— সু চুয়ান
সূত্র

ডিফার ব্যবহার করে কি কোনও পার্শ্ব-প্রতিক্রিয়া রয়েছে?

— মোহাম্মদ আলী আকবরী

1

স্ক্রিপ্ট ট্যাগের deferবৈশিষ্ট্যটি এখানে কীভাবে কাজ করে সে সম্পর্কে আপনি আরও পড়তে পারেন । এটি ডিওএম পার্স হওয়ার পরে, তবে উইন্ডো ইভেন্টটি চালিত হওয়ার আগে জেএস কোড চালাতে বিলম্ব করবে onload।

— JrBaconCheez

51

আমি একই ত্রুটি পেয়েছি। সমাধানটি আপনার স্ক্রিপ্ট কোডটি শিরোনামের শৃঙ্খলে না রেখে দেহের শেষের আগে করা।

— লি বিং ঝাও
সূত্র

শরীরের শেষের আগে কিন্তু মাথায় নেই? এর আসল অর্থ কি?

— বিরক্তিজনক

6

<লিপি src = "index.js"> </script> </body>

— লি বিং ঝাও

3

আপনার vue.js কোডটি </ em> র আগে রাখুন, ব্রাউজারগুলি প্রথমে শরীরের সামগ্রী লোড করবে, তারপরে vue.js কোডটি লোড করবে, এটি কার্যকর হবে।

— লি বিং ঝাও

1

লারাভেল এবং এর সাথে লারাভেল-মিশ্রণটি ব্যবহার করার সময় এই সমস্যাটি ছড়িয়ে পড়ে। শরীরের সমাধানের পরে জেএসের লোডটি সরানো।

— জন

24

সহজ জিনিসটি হ'ল ডকুমেন্টের নীচে স্ক্রিপ্টটি আপনার ক্লোজিং </body>ট্যাগের ঠিক আগে রাখা :

<body>
   <div id="main">
      <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
   </div>
   <script src="app.js"></script>
</body>

app.js ফাইল:

var main = new Vue({
    el: '#main',
    data: {
        currentActivity: 'home'
    }
});

— তাদাস স্ট্যাসিউলিয়নিস
সূত্র

0

আপনি এটি দুটি উপায়ে সমাধান করতে পারেন।

নিশ্চিত করুন যে আপনি এইচডিএমএল পৃষ্ঠার শেষে সিডিএন রেখেছেন এবং তার পরে নিজের স্ক্রিপ্টটি রেখেছেন। উদাহরণ:

    <body>
      <div id="main">
        <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
      </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script src="js/app.js"></script>

যেখানে আপনাকে অন্য যে কোনও জাভাস্ক্রিপ্ট ফাইল বা এইচটিএমএল ফাইলে লিখেছেন একই জাভাস্ক্রিপ্ট কোড রাখতে হবে।

আপনার জাভাস্ক্রিপ্ট ফাইলে উইন্ডো.অনলোড ফাংশনটি ব্যবহার করুন।

— নিজাত মুরসালি
সূত্র

0

আমি মনে করি কখনও কখনও বোকা ভুল আমাদের এই ত্রুটি দিতে পারে।

<div id="#main"> <--- id with hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

প্রতি

<div id="main"> <--- id without hashtag
    <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div>
</div>

— নিশার্গ শাহ
সূত্র