[Vue warn]: Cannot find element

javascript mvvm vue.js
dopatraman picture dopatraman · Apr 7, 2015 · Viewed 125.9k times · Source

I'm using Vuejs. This is my markup:

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

This is my code:

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

When I load the page I get this warning:

[Vue warn]: Cannot find element: #main

What am I doing wrong?

Answer

Arun P Johny picture Arun P Johny · Apr 7, 2015

I think the problem is your script is executed before the target dom element is loaded in the dom... one reason could be that you have placed your script in the head of the page or in a script tag that is placed before the div element #main. So when the script is executed it won't be able to find the target element thus the error.

One solution is to place your script in the load event handler like

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

Another syntax

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

Related questions

Vue.js—Difference between v-model and v-bind

I'm learning Vue with an online course and the instructor gave me an exercise to make an input text with a default value. I completed it using v-model but, the instructor chose v-bind:value and I don't understand why. Can …

Read More
How can I bind the html <title> content in vuejs?

I'm trying a demo on vuejs. Now I want the html title to bind a vm field. The below is what I tried: index.html <!DOCTYPE html> <html id="html"> <head> <title>{{ …

Read More
Is there a proper way of resetting a component's initial data in vuejs?

I have a component with a specific set of starting data: data: function (){ return { modalBodyDisplay: 'getUserInput', // possible values: 'getUserInput', 'confirmGeocodedValue' submitButtonText: 'Lookup', // possible values 'Lookup', 'Yes' addressToConfirm: null, bestViewedByTheseBounds: null, location:{ name: null, address: null, position: null } } This is data …

Read More