"$ attrs是只读的"，"$ listeners是只读的"，“避免直接更改道具". [英] "$attrs is readonly","$listeners is readonly","Avoid mutating a prop directly"

问题描述

我是Vue的新手.我正在尝试开发一个聊天应用程序，其中朋友列表将显示在左侧菜单上，而聊天框将显示在正文中.我正在使用ajax调用加载朋友列表，并根据朋友ID路由到聊天框.这是代码示例.

 < div class ="chat-c​​ontainer clearfix" id ="chat">< div class ="people-list" id ="people-list">< chatlist-component></chatlist-component></div>< div class ="chat">< router-view>//router-view></div></div> 

聊天列表组件将从服务器加载朋友列表.这是我的app.js文件；

  Vue.use(VueRouter)const router = new VueRouter({路线，linkActiveClass:活动"});从'./components/ChatComponent'导入ChatComponent；const路由= [{路径:"/chat/:id/:name"，组件:ChatComponent，名称:"chat"}];Vue.component('chatlist-component'，require('./components/ChatlistComponent.vue'));const app = new Vue({el:'#chat'，路由器}); 

聊天列表组件模板代码

 < li class ="clearfix" v-for =用户中的用户">< img:src ="baseUrl +'/img/default_image.jpeg'" alt =头像" class ="chat-avatar圆形圆圈"/>< router-link class ="about":to ="{name:'chat'，params:{id:user.id，name:user.name}}">< div class ="name"> {{user.name}}</div>< div class ="status">< i class ="fa fa-circle online"</i>在线的</div></router-link></li> 

在我切换到另一个用户之前，它工作正常.当我单击聊天列表组件中的任何路由器列表时，它可以正常工作，但向控制台抛出以下错误.

  app.js:19302 [Vue警告]:$ attrs为只读.在发现--->< RouterLink>< ChatlistComponent>在resources/assets/js/components/ChatlistComponent.vue<根>app.js:19302 [Vue警告]:$ listeners为只读.在发现--->< RouterLink>< ChatlistComponent>在resources/assets/js/components/ChatlistComponent.vue<根>app.js:19302 [Vue警告]:避免直接更改道具，因为每当父组件重新渲染时，该值就会被覆盖.取而代之的是，根据道具的值使用数据或计算属性.道具被变异:至" 

预先感谢

解决方案

首先，这些错误仅在非生产版本中出现，但是它们指示应在生产发布之前解决的问题.

如果加载了多个Vue实例，则会显示$ attrs，$ listeners和其他警告.据我了解，这种情况通常可能由于以下原因之一发生:

• 它是通过webpack加载/打包到捆绑包中的，还可以从外部(不是通过webpack加载)
• 它由您包含的内容加载(例如如果您看到Vue以两种或多种不同方式显示，则表明已加载多个Vue实例.Vue仅支持一个实例，并且如果加载了多个实例，可能会产生这些错误消息.

  上面提到的问题有多个链接，Vuetify问题是我提出的.在那种情况下，Vuetify需要Vue，并且加载它的方式与我不同.通常，解决方法是检查您指定(或未指定)Vue的webpack配置，并尝试使其与包含其他副本的方式匹配(例如，绝对路径与相对路径，或打包路径与外部路径).

  I am new to Vue. I am trying to develop a chatting application where friend list will be shown on the left menu and the chat box will be shown at the body. I am loading friend list using an ajax call and routing to chat box based on friend id. Here is the code sample.

  <div class="chat-container clearfix" id="chat">
      <div class="people-list" id="people-list">
          <chatlist-component></chatlist-component>
      </div>
  
      <div class="chat">
         <router-view></router-view>
      </div>
  </div> 
  

  chat list component will load friend list from the server. Here is my app.js file;

  Vue.use(VueRouter)
  
  const router = new VueRouter({
    routes,
    linkActiveClass: "active"
  });
  
  
      import ChatComponent from './components/ChatComponent';
      const routes = [
        { path: '/chat/:id/:name', component: ChatComponent , name: 'chat'}
      ];
      Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));
  
      const app = new Vue({
          el: '#chat',
          router
      });
  

  And Chat list component template code

  <li class="clearfix" v-for="user in users">
                  <img :src="baseUrl+'/img/default_image.jpeg'" alt="avatar" class="chat-avatar rounded-circle" />
                  <router-link class="about" :to="{ name: 'chat', params: { id: user.id, name:user.name }}">
                      <div class="name">{{user.name}}</div>
                      <div class="status">
                          <i class="fa fa-circle online"></i> online
                      </div>
                  </router-link>
  
              </li>
  

  It works fine until I switch to another user. When I click on any router list from chatlist component it works fine but throws following error to console.

  app.js:19302 [Vue warn]: $attrs is readonly.
  
  found in
  
  ---> <RouterLink>
         <ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
           <Root>
  
  app.js:19302 [Vue warn]: $listeners is readonly.
  
  found in
  
  ---> <RouterLink>
         <ChatlistComponent> at resources/assets/js/components/ChatlistComponent.vue
           <Root>
  
  app.js:19302 [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"
  

  Thanks in advance

  解决方案

  First, these errors only come out in non-production builds, however they indicate a problem that should be resolved before production release.

  The $attrs, $listeners and other warnings are displayed if there's more than one instance of Vue loaded. As I understand it, this can happen usually for one these reasons:

  • it is being loaded/packed into the bundle by webpack and also loaded externally (not via webpack)
  • it is being loaded by something you include (e.g. vuetify, vue-test-utils, vue-cli-electron-builder) one way and by your webpack config another way (e.g. absolute vs relative paths, common.js vs esm.js vue files, runtime-only vue vs compiler+runtime vue)

  If you click on that line (it was app.js:19302 in your output above) and put a breakpoint where the message is coming out, you can see the list of modules in the stack traceback to see if there's more than one path to Vue listed. For example, see that the top three modules have a different path below (but are all part of Vue): If you see Vue showing up in two or more different ways, it demonstrates that more than one instance of Vue is loaded. Vue only supports a single instance, and can produce these error messages if more than one is loaded.

  There are several links to issues included above, the Vuetify issue was the one I filed. In that case, Vuetify requires Vue and was loading it differently than I was. Usually the fix is to check your webpack config where Vue is specified (or isn't) and try to make it match the way the other copy is being included (e.g. absolute vs relative path, or packed vs external).

  这篇关于"$ attrs是只读的"，"$ listeners是只读的"，“避免直接更改道具".的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！