CODEWITHSUNDEEP
vue.js
Andre Garcia
Andre Garcia

Reputation: 914

vue.js:597 [Vue warn]: $listeners is readonly router-link

I´m using vue.js to build application and i am stuck with this warning that affects all my app router-links apparently. I know that this may be due to multiple vue instances op but i already checked and i don´t know where it may be!

Sidenav.vue

<template>
  <section id="sidenav">
    <router-link to="/" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
     uk-margin-small-bottom" active-class="uk-button-primary" exact> Home </router-link>

    <router-link to="/sistema" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
    uk-margin-small-bottom" active-class="uk-button-primary"> Gestão de Sistema </router-link>

    <router-link to="/consumo" tag="button" class="uk-button uk-button-default uk-button-large uk-width-1-1
    uk-margin-small-bottom" active-class="uk-button-primary"> Pontos de Consumo </router-link>

    <router-link to="/controlo" tag="button"  class="uk-button uk-button-default uk-button-large uk-width-1-1"
                 active-class="uk-button-primary">
      Controlo</router-link>
  </section>
</template>

<script>
  export default ({
  });
</script>

<style>

</style>

Here is the warning that affects my app:

vue.js:597 [Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
       <AppSidenav> at src/components/Sidenav.vue
         <App> at src/App.vue
           <Root>

App.vue

<template>
  <div id="app">
    <div class="uk-container" style="margin-top:10px;" v-if="checkLogin()">
      <app-header></app-header>
      <div class="uk-grid my-grid">
        <div class="uk-width-1-4 my-nav">
          <app-sidenav></app-sidenav>
        </div>
        <div class="uk-width-3-4" style="border-left:1px solid #e5e5e5; padding-top: 10px;">
          <router-view></router-view>
        </div>
      </div>
      <app-footer></app-footer>
    </div>
  <app-login v-else></app-login>
  </div>
</template>

<script>
  import Header from './components/Header';
  import Sidenav from './components/Sidenav';
  import Home from './components/Home';
  import Footer from './components/Footer';
  import Login from './components/login/Login';
  import {mapGetters} from 'vuex';

  export default {
    components: {
      'appHeader': Header,
      'appSidenav': Sidenav,
      'appHome': Home,
      'appFooter': Footer,
      'appLogin': Login,
    },
    computed: {
      checkLogin() {
        return this.isLoggedIn;
      }
    },
    methods:{
      ...mapGetters(['isLoggedIn']),
    },
  }
</script>

<style>
  .my-grid{
    border-top:1px solid #e5e5e5;
    margin-top: 10px !important;
  }
  .my-nav{
    padding: 20px 10px 20px 10px;
    /*padding-top: 50px;*/
    /*padding-bottom: 20px;*/
    border-bottom: 1px solid #e5e5e5;
    /*padding-left:10px;*/
    /*padding-right:10px;*/
    /*background-color: #F0F0F0;*/
  }
</style>

I have routes.js and store.js where i import vue and use Router and Vuex respectively inside both files.

Upvotes: 0

Views: 1240

Answers (1)

Andre Garcia
Andre Garcia

Reputation: 914

Found the issue, i am using vue package through npm but i was also importing vue in my index.html file!

Just removed it and everthing is fine now!

Upvotes: 2

Related Questions