"$attrs is read only", "$listeners is read only", "프로포트를 직접 변환하지 마십시오."

"$attrs is read only", "$listeners is read only", "프로포트를 직접 변환하지 마십시오."

나는 Vue에 처음입니다.왼쪽 메뉴에 친구 목록이 표시되고 본문에 채팅 상자가 표시되는 채팅 앱을 개발하려고 합니다.친구 아이디를 기반으로 Ajax 콜과 채팅창으로 라우팅하여 친구 목록을 로드하고 있습니다.여기 코드 샘플이 있습니다.

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

채팅 목록 구성 요소가 서버에서 친구 목록을 로드합니다.여기 제 app.js 파일입니다.

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
    });

채팅 목록 구성 요소 템플릿 코드

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

다른 사용자로 전환할 때까지 정상적으로 동작합니다.chatlist 컴포넌트에서 라우터 목록을 클릭하면 정상적으로 동작하지만 다음 오류가 콘솔에 표시됩니다.

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"

잘 부탁드립니다

첫째, 이러한 오류는 비운용 빌드에서만 발생하지만 실제 가동 릴리스 전에 해결해야 할 문제를 나타냅니다.

Vue 인스턴스가 두 개 이상 로드된 경우 $attrs, $listeners 및 기타 경고가 표시됩니다.제가 알기론 보통 다음 중 하나의 이유로 인해 발생할 수 있습니다.

• 웹 팩에 의해 번들에 로드/패킹되며 외부(웹 팩이 아님)에도 로드됩니다.
• vuetify, vue-test-files, vue-cli-files-files, vue-cli-files-files 등 사용자가 포함하는 것에 의해 로드되고 웹 팩 구성(예: 절대 경로와 상대 경로, common.files와 esm.files 파일, 런타임 전용 vue vue와 컴파일러+files)에 의해 로드됩니다.

이 행(위의 출력에서는 app.js:19302)을 클릭하여 메시지 출력에 브레이크포인트를 넣으면 스택트레이스백에 Vue로의 경로가 여러 개 있는지 확인할 수 있습니다.예를 들어, 상위 3개 모듈의 경로는 다음과 같습니다(단, 모두 Vue의 일부임). Vue가 두 가지 이상의 다른 방법으로 표시되는 경우 Vue 인스턴스가 두 개 이상 로드되었음을 나타냅니다.Vue는 단일 인스턴스만 지원하며 둘 이상의 인스턴스가 로드된 경우 이러한 오류 메시지를 생성할 수 있습니다.

상기 문제에 대한 링크가 몇 개 있습니다.Vuetify 문제는 제가 제출한 것입니다.이 경우 Vuetify는 Vue를 필요로 하며 저와 다르게 로딩하고 있었습니다.보통 수정은 Vue가 지정된(또는 지정되지 않은) 웹 팩 구성을 확인하고 다른 복사본이 포함된 방식과 일치하도록 하는 것입니다(절대 경로와 상대 경로 또는 패킹된 경로와 외부 경로 등).

이 오류는 프로젝트에서 Git 서브모듈을 사용하고 있는데 다음 폴더가 있었기 때문에 발생했습니다.

• ./node_modules본프로젝트용입니다.「node_vue」라고 하는, 「node_vue」라고 합니다.
• ./my_git_submodules/vue_design_system/node_modules- 기본 컴포넌트를 제공하는 시스템 설계(vue도 사용)Vue도 여기에 설치되었습니다!!

그 이유는 다음과 같습니다.

• ./node_modules/vue...
• ./my_git_submodules/vue_design_system/node_modules/vue

중, " "npm run serve )vue-cli-service buildVue v 개 、 2 개 개 v v v v v v v v v해도 아무 일도 않고 $전용 오류만합니다.)버튼을 클릭해도 아무 일도 일어나지 않습니다.120달러입니다.

★★★★★★★★★★★★★★:
(vue_design_system)"node_mody" "npm run serve" "npm run serve" "npm run serve" "npm run serve" "npm

수정 ★★★★★★★★★★★★★★★★★★:
node_modules에 vue.config.js

저도 같은 문제에 직면했어요.저는 를 사용하여 로컬모듈을 설치했기 때문에

yarn add ../somemodule --force

이 명령어는 node_modules 서브디렉토리를 포함한 모듈디렉토리 전체를 카피합니다.이로 인해 동일한 버전의 "vue" 모듈이 중복됩니다.브라우저 devtool에서 모듈의 여러 소스를 볼 수 있습니다.

저에게 해결책은 로컬모듈 설치 후 매번 node_modules를 수동으로 삭제하는 것입니다.

제 경우 VueCLI를 사용하지 않는 프로젝트에서 마이그레이션하고 있었습니다..<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>index하여 Vue CLI index.html 에 Public 에 충돌하고 .Vue CLI에는 독자적인 방법으로 vue를 Import하기 때문에 서로 충돌하고 있었습니다.나는 단지 대본을 지웠을 뿐이고 문제는 해결되었다.

위와 같은 문제가 있었습니다.git 서브모듈을 사용하고 있는데

yarn add ./submodule

./submodule 디렉토리에 node_modules 디렉토리가 있어 모든 것을 혼란스럽게 했습니다.

2개의 Vue 인스턴스를 로드하고 있었습니다.

이것을 vue.config.js에 추가해, 나에게 있어서 효과가 있었다.

const path = require('path')

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue'
    }
  }
}

은 또한 이 using제는음음 this이음음음음음음음음음음음 this this this this this this this this this this this this this.npm linkueue@salami_salami를 사용하다

이 문제의 해결 방법은 공개되지 않은 모듈을 포함하는 것입니다.

여러 가지 가능한 답이 있는 것 같네요.

했는데, 는 "npm"이 입니다.npm i명령어를 입력합니다.명령어를 하면 모든 이 정상적으로했습니다.install은 으로 동작했습니다.

제 경우 모듈이 컴포넌트를 페더레이션한 후 이 오류가 발생했습니다.부품 공급자에게 부품 수신기의 vue를 공유하여 해결했습니다.예

webpack.config.js 
module.exports = { 
   plugins: [
        
    new ModuleFederationPlugin({
      name: "dashboard",
      remotes: {
        web_common: "web_common@http://localhost:8081/remoteEntry.js"
      },
      shared: {
        vue: { // this solved my issue.
          eager: true,
          singleton: true,
          requiredVersion: deps.vue
        },
      }
    }),
   ]

}

언급URL : https://stackoverflow.com/questions/49585845/attrs-is-readonly-listeners-is-readonly-avoid-mutating-a-prop-directly