Ошибка с элементом ссылки маршрутизатора VueJs

Каждый раз, когда я нажимаю на один из элементов ссылки маршрутизатора vuejs на панели навигации страницы app.blade.php, я получаю сообщение об ошибке на своей консоли, как показано ниже.

 [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>

В приведенном ниже коде показано, как я реализовал ссылки маршрутизатора на панели навигации.

<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>

Может кто-нибудь объяснить, почему я получаю эту ошибку?


javascript vue.js laravel routerlink
person Mamod1    schedule 01.08.2018    source источник
comment
[Предупреждение Vue]: $ attrs доступен только для чтения. найдено в --- ›‹RouterLink› ‹Root›   -  person Mamod1    schedule 02.08.2018
comment
Это первая ошибка, которую я получаю   -  person Mamod1    schedule 02.08.2018

Ответы (2)


arrow_upward
0
arrow_downward

вы пытаетесь изменить элемент props внутри компонента vue. Используйте data для этих целей.

person Sergey Shuryakov    schedule 01.08.2018

arrow_upward
0
arrow_downward

Надеюсь, это кому-то поможет.
Моя проблема заключалась в том, что я зарегистрировал глобальный миксин в main.js со следующей функцией:

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

Просто переименуйте или удалите эту конфигурацию, и все ошибки RouterLink исчезнут.

person A1rPun    schedule 12.03.2019