“$attrs 是只读的"，“$listeners 是只读的"，“避免直接改变一个道具"

quot;$attrs is readonlyquot;,quot;$listeners is readonlyquot;,quot;Avoid mutating a prop directlyquot;(“$attrs 是只读的，“$listeners 是只读的，“避免直接改变一个道具)

问题描述

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

<div class="chat-c​​ontainer clearfix" id="chat"><div class="people-list" id="people-list"><chatlist-component></chatlist-component></div><div 类="聊天"><路由器视图></路由器视图></div></div>

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

Vue.use(VueRouter)常量路由器 = 新的 VueRouter({路线，链接活动类:活动"});从 './components/ChatComponent' 导入 ChatComponent；常量路线 = [{ 路径:'/chat/:id/:name'，组件:ChatComponent ，名称:'chat'}];Vue.component('chatlist-component', require('./components/ChatlistComponent.vue'));const app = new Vue({埃尔:'#chat'，路由器});

及聊天列表组件模板代码

<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 类="状态"><i class="fa fa-circle online"></i>在线的</div></路由器链接></li>

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

app.js:19302 [Vue 警告]:$attrs 是只读的.在发现---><路由器链接><聊天列表组件>在资源/资产/js/components/ChatlistComponent.vue<根>app.js:19302 [Vue 警告]:$listeners 是只读的.在发现---><路由器链接><聊天列表组件>在资源/资产/js/components/ChatlistComponent.vue<根>app.js:19302 [Vue 警告]:避免直接改变 prop，因为只要父组件重新渲染，该值就会被覆盖.相反，使用基于道具值的数据或计算属性.正在变异的道具:to"

提前致谢

首先，这些错误只出现在非生产版本中，但它们表明应该在生产版本之前解决问题.

如果加载了多个 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 是只读的"，“避免直接改变一个道具"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！