Whenever I click on a vuejs router-link element in my app.blade.php page navigation bar, I keep seeing an error in my console which is displayed 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 snippet of code below demonstrates how I set up my router-links within the 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>
I am seeking clarification as to why this error keeps occurring.