{"record":{"id":"37ef1a7e6bf5dd61","repo":"Meituan-Dianping/mpvue","slug":"avoid-mutating-a-prop-directly-since-the-value-wil-37ef1a","errorCode":null,"errorMessage":"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: \"${key}\"","messagePattern":"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: \"(.+?)\"","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/core/instance/state.js","lineNumber":94,"sourceCode":"  // instead of dynamic object key enumeration.\n  const keys = vm.$options._propKeys = []\n  const isRoot = !vm.$parent\n  // root instance props should be converted\n  observerState.shouldConvert = isRoot\n  for (const key in propsOptions) {\n    keys.push(key)\n    const value = validateProp(key, propsOptions, propsData, vm)\n    /* istanbul ignore else */\n    if (process.env.NODE_ENV !== 'production') {\n      if (isReservedAttribute(key) || config.isReservedAttr(key)) {\n        warn(\n          `\"${key}\" is a reserved attribute and cannot be used as component prop.`,\n          vm\n        )\n      }\n      defineReactive(props, key, value, () => {\n        if (vm.$parent && !isUpdatingChildComponent) {\n          warn(\n            `Avoid mutating a prop directly since the value will be ` +\n            `overwritten whenever the parent component re-renders. ` +\n            `Instead, use a data or computed property based on the prop's ` +\n            `value. Prop being mutated: \"${key}\"`,\n            vm\n          )\n        }\n      })\n    } else {\n      defineReactive(props, key, value)\n    }\n    // static props are already proxied on the component's prototype\n    // during Vue.extend(). We only need to proxy props defined at\n    // instantiation here.\n    if (!(key in vm)) {\n      proxy(vm, `_props`, key)\n    }\n  }","sourceCodeStart":76,"sourceCodeEnd":112,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/core/instance/state.js#L76-L112","documentation":"Error \"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: \"${key}\"\" thrown in Meituan-Dianping/mpvue.","triggerScenarios":"Thrown at src/core/instance/state.js:94 when the library encounters an invalid state.","commonSituations":"See trigger scenarios.","solutions":["Define a local data property initialized from the prop and mutate that: props: ['initialCount'], data() { return { count: this.initialCount } }","Use a computed property that derives the transformed value from the prop","For true two-way binding, emit an event to the parent (v-model pattern) and let the parent update the source","If passing objects down, mutate a deep copy made in data(), never the prop object itself"],"exampleFix":null,"handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}