Good afternoon, I started to make a new project on vuejs2, but I ran into a strange problem. I use this template: https://github.com/vuejs-templates/webpack-simple plus add vue-router: https://github.com/vuejs/vue-router/blob/dev/examples/basic/app.js

Without a router, everything works as it should, but as soon as I connect the router, the onclick event stops working, the router itself works. It does not throw out any errors, it just stops working. Where to look and how to fix it?

UPD: I'm still dumb. in App.vue, I have this:

<template> <div id="app"> <hello></hello> <router-view></router-view> </div> </template> <script> import hello from './components/hello/Hello.vue' export default { name: 'app', components: { hello } } </script> <style>...</style>

and if in hello.vue in the template you set any button with onclick, then it will not work if the component is connected in this way. And it will work if you connect the same hello.vue to the router like this:

main.js

 import Vue from 'vue' import App from './App.vue' import VueRouter from 'vue-router'; import hello from './components/hello/Hello.vue' new Vue({ el: '#app', template: '<App/>', components: { App } }); Vue.use(VueRouter); const routes = [ { path: '/hello', name: 'hello', component: hello }, ]; var router = new VueRouter({ mode: 'history', base: __dirname, routes }); const app = new Vue({ router }).$mount('#app');

therefore, the question is changing: how to make it so that it would be possible to connect the components not in the router (and what would they work)? for example, in this case, I need this hello.vue to be on all pages, because it is connected to app.vue, but there it does not work correctly.

  • and sample code that doesn't work? - Orange_shadow
  • <button v-on: click = "doSomething"> Do it! </ button> - NerV
  • It's great, an example would be from the context, did you specify the container? to initialize vue, and is the button exactly in it? - Orange_shadow
  • The rest of the code on the links above I practically did not change anything in it, just added one button and that's it. Without a router, the button works, I turn on the router - it works, the button does not. - nerv
  • Well, how and where did you arrange onclick processing? example - Orange_shadow

1 answer 1

Damn .. I'm an idiot .. everything was very simple, you had to replace this piece of code:

 const app = new Vue({ router }).$mount('#app');

on

 const app = new Vue({ router, render: function(createElement){ return createElement(App) } }).$mount('#app')

and it works.