admin管理员组

文章数量:1410705

Not a duplicate: already check this question and this one; didn't get any clue. Some of similar ones are related to Laravel.

Can't figure out what was changed in my project, making [Vue warn]: Cannot find element: #app appear.

The structure:

index.html: hosts the <div id="app">:

[HEADER]

<div id="app" v-cloak></div>

[FOOTER]

main.js:

import Vue from 'vue';
import Users from './Users.vue';
import App from './App.vue';             // (1)
import Home from './Home.vue';           // (2)
import VueRouter from 'vue-router';      // (3)

Vue.use(VueRouter);

const routes = [
  {path: '/users', ponent: Users},
  {path: '/', ponent: Home}
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

EDIT: when changed the last block to:

$(document).ready(function () {
  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  })
})

it didn't help either.

App.vue:

<template>
  <router-view>
</router-view>
</template>

<script>
export default {
  data () {
    return {
      message: "Test message"
    }
  }
}
</script>

Home.vue:

<template>
    [contents]
    [router-links]
</template>

<script>
    [data]
    [methods]
</script>

Whenever I get to the index page, the Vue warn gets displayed. One of attached questions I checked suggested that the DOM element is not ready when scripts are running. Already tried to switch order of imports in main.js (App, Home and VueRouter, as marked in ments), but with no success.

Any idea where to look for solution?

Not a duplicate: already check this question and this one; didn't get any clue. Some of similar ones are related to Laravel.

Can't figure out what was changed in my project, making [Vue warn]: Cannot find element: #app appear.

The structure:

index.html: hosts the <div id="app">:

[HEADER]

<div id="app" v-cloak></div>

[FOOTER]

main.js:

import Vue from 'vue';
import Users from './Users.vue';
import App from './App.vue';             // (1)
import Home from './Home.vue';           // (2)
import VueRouter from 'vue-router';      // (3)

Vue.use(VueRouter);

const routes = [
  {path: '/users', ponent: Users},
  {path: '/', ponent: Home}
];

const router = new VueRouter({
  routes
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

EDIT: when changed the last block to:

$(document).ready(function () {
  new Vue({
    el: '#app',
    router,
    render: h => h(App)
  })
})

it didn't help either.

App.vue:

<template>
  <router-view>
</router-view>
</template>

<script>
export default {
  data () {
    return {
      message: "Test message"
    }
  }
}
</script>

Home.vue:

<template>
    [contents]
    [router-links]
</template>

<script>
    [data]
    [methods]
</script>

Whenever I get to the index page, the Vue warn gets displayed. One of attached questions I checked suggested that the DOM element is not ready when scripts are running. Already tried to switch order of imports in main.js (App, Home and VueRouter, as marked in ments), but with no success.

Any idea where to look for solution?

  • javascript
  • vue.js
  • vuejs2
Share edited Jul 28, 2017 at 9:05 AbreQueVoy asked Jul 28, 2017 at 8:45 AbreQueVoyAbreQueVoy 2,3268 gold badges39 silver badges61 bronze badges 7
  • Your script tag with your spa should be right under #app div tag. Are you sure that it works well with your template engine? – Andrii Kudriavtsev Commented Jul 28, 2017 at 8:52
  • 1 You can also use the defer attribute in the script tag or the window.addEventListener("load", <your function>); method – Bellian Commented Jul 28, 2017 at 8:56
  • @Bellian: Used jQuery ready function for this (see edited part), but with no success. – AbreQueVoy Commented Jul 28, 2017 at 9:06
  • yan you also post where and how you include the main.js? – Bellian Commented Jul 28, 2017 at 9:09
  • @Bellian: It is processed by webpack, link is at the end of <body> tag. – AbreQueVoy Commented Jul 28, 2017 at 9:16
 |  Show 2 more ments

1 Answer 1

Reset to default 2

Okay, found the bug:

index.html:

(...)
      </footer>
   <script src="../dist/build.js"></script>
</body>

The script over there is located in a build directory. However, webpack generates its own script file on the fly and runs the application from it. The script mentioned above in the code was simply overwriting values correctly loaded before. Deleting the ../dist/ directory and menting the script line out brought everything back to normal.

本文标签： javascriptVue warn Cannot find element appVuejs 2Stack Overflow

版权声明：本文标题：javascript - [Vue warn]: Cannot find element: #app - Vue.js 2 - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744917568a2632087.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。