Избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. (Vue -router) - PullRequest
Новая
       30

Избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. (Vue -router)

0 голосов
/ 01 мая 2020

У меня проблема при добавлении маршрутов в Vue с использованием Vue -router. Я знаю, что это предупреждение, но все же мне нужно решить эту проблему, поэтому ваша помощь будет оценена по достоинству. Я работаю с laravel vue и я начинающий. Я попробовал почти каждую ссылку StackOverflow, чтобы удалить это предупреждение, но не получилось. Ниже вы можете увидеть мой код.

приложение. js


window.Vue = require('vue');
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import moment from 'moment'
import $ from 'jquery'
import 'datatables.net'
import routes from './components/includes/routes'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.use(VueMaterial)


import App from './components/views/App'



Vue.filter('formatDate', function(value) {

    if (value) {

      return moment(String(value)).format('L (LT)')

    }

  });


Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('app-component', require('./components/views/App.vue').default);
Vue.component('donations-component', require('./components/views/Donations.vue'));
Vue.component('needy-component', require('./components/views/Needy.vue'));


var router = new VueRouter({
  routes: routes,
  mode: 'history'
})



const app = new Vue({
    el: '#app',
    components: { App },
    router,
});

маршруты. js

import Needy from '../views/Needy'

const routes = [
        {
            path: '/home',
            name: 'donations',
            component: Donations,
        },
        {
            path: '/needy',
            name: 'needy',
            component: Needy,
        },
    ];

  export default routes

Приложение. vue

  <div class="page-container md-layout-column">
    <md-toolbar class="md-primary">
      <md-button class="md-icon-button" @click="showNavigation = true">
        <md-icon>menu</md-icon>
      </md-button>
      <span class="md-title">My Title</span>

      <div class="md-toolbar-section-end">
        <md-button @click="showSidepanel = true">Favorites</md-button>
      </div>
    </md-toolbar>

    <md-drawer :md-active.sync="showNavigation" md-swipeable>
      <md-toolbar class="md-transparent" md-elevation="0">
        <span class="md-title">My App name</span>
      </md-toolbar>

      <md-list>
        <md-list-item>
          <md-icon>move_to_inbox</md-icon>
          <router-link :to="{ name: 'donations' }" class="md-list-item-text">Donations</router-link>
        </md-list-item>
        <md-list-item>
          <md-icon>move_to_inbox</md-icon>
          <router-link :to="{ name: 'needy' }" class="md-list-item-text">Needy</router-link>
        </md-list-item>
      </md-list>
    </md-drawer>

    <md-content>
        <router-view></router-view>
    </md-content>
  </div>
</template>

<script>
  export default {
      data (){
          return {
              showNavigation: false,
            showSidepanel: false
          }
      }
  }
</script>

<style lang="scss" scoped>

</style>

Ошибка в консоли браузера 

[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>
       <MdRipple> at src/components/MdRipple/MdRipple.vue
         <MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
           <MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
             <MdList> at src/components/MdList/MdList.vue
               <MdDrawer> at src/components/MdDrawer/MdDrawer.vue
                 <AppComponent> at resources/js/components/views/App.vue
                   <Root> vue.js:597:15
[Vue warn]: $attrs is readonly.

found in

---> <RouterLink>
       <MdRipple> at src/components/MdRipple/MdRipple.vue
         <MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
           <MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
             <MdList> at src/components/MdList/MdList.vue
               <MdDrawer> at src/components/MdDrawer/MdDrawer.vue
                 <AppComponent> at resources/js/components/views/App.vue
                   <Root> vue.js:597:15
[Vue warn]: $listeners is readonly.

found in

---> <RouterLink>
       <MdRipple> at src/components/MdRipple/MdRipple.vue
         <MdListItemContent> at src/components/MdList/MdListItem/MdListItemContent.vue
           <MdListItemDefault> at src/components/MdList/MdListItem/MdListItemDefault.vue
             <MdList> at src/components/MdList/MdList.vue
               <MdDrawer> at src/components/MdDrawer/MdDrawer.vue
                 <AppComponent> at resources/js/components/views/App.vue
                   <Root>
...