Error with VueJs router-link element

Question

Every time I click on one of my vuejs router-link elements in my app.blade.php page navigation bar, I end up getting an error on my console as seen below

 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "to"

 found in

 ---> <RouterLink>
   <Root>

The code below shows how I implemented my router-links within my navigation bar.

<ul class="navbar-nav ml-auto">
                    <!-- Authentication Links -->
                    @guest
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                        </li>
                    @else
                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px; ">

                               <router-link style="color:black;" :to="{ name: 'home' }">Menu<i class="fa fa-home" style="margin-left:8px;"></i></router-link>
                        </li>

                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">

                               <router-link style="color:black;" :to="{ name: 'orders' }">Orders <i class="fa fa-coffee" style="margin-left:8px;"></i></router-link>
                        </li>



                        <li class="nav-item"  id="navbarDropdown" class="nav-link" role="button" aria-haspopup="true" aria-expanded="false" style="padding: 15px;">

                               <router-link style="color:black;" :to="{ name: 'cart' }">Cart <i class="fa fa-shopping-cart" style="margin-left:8px;"></i></router-link>
                        </li>

Can someone please explain why I get this error?

[Vue warn]: $attrs is readonly. found in ---> – Mamod1 Aug 01 '18 at 21:21 — Mamod1, Aug 01 '18 at 21:21
That is the first error i get – Mamod1 Aug 01 '18 at 21:22 — Mamod1, Aug 01 '18 at 21:22

score 0 · Answer 1 · answered Aug 01 '18 at 21:15

0

you are trying to change your props element inside vue component. Use data for that purposes.

answered Aug 01 '18 at 21:15

Sergey Shuryakov

189
5

score 0 · Answer 2 · answered Mar 12 '19 at 17:11

Hopefully this helps someone.
My problem was that I registered a global mixin in main.js with the following function:

Vue.mixin({
  methods: {
    to(name, params) {
      this.$router.resolve({ name, params });
    },
  },
});

Just rename or remove this configuration and all RouterLink errors dissapear.

Error with VueJs router-link element

2 Answers2