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

问题描述

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

<div class="people-list" id="people-list"><chatlist-component></chatlist-component>
<div class="chat"><路由器视图></路由器视图>

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

Vue.use(VueRouter)const 路由器 = 新的 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',路由器});

和聊天列表组件模板代码

<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="状态"><i class="fa fa-circle online"></i>在线的

</路由器链接>

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

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

提前致谢

解决方案

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

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

• 它被 webpack 加载/打包到 bundle 中，也被外部加载(不是通过 webpack)
• 它正在被您包含的内容加载(例如 如果您看到 Vue 以两种或多种不同的方式出现，则表明加载了多个 Vue 实例.Vue 仅支持单个实例，如果加载多个实例，则会产生这些错误消息.

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

  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 是只读的"，“避免直接改变 prop"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！