過去 2 日間に新しいプロジェクトを作成したときに、要素 UI の時刻と日付セレクターでエラーが発生しました。
[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: "placement"
このエラーは実際の動作には影響しませんが、非常に不快に見えます。
解決する
エラー レポートによると、このエラーは要素 ui data-picker の下のピッカー ファイルによって報告されました。node_modules でこの vue ファイルを見つけ、配置が props 値に追加されていることがわかりました: Popper.props.placement。作成されたとき、
配置
は割り当て操作があります this .placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left; これによりエラーが発生します。
バージョン内のプロパティに配置がなかったため、古いプロジェクトはエラーを報告しませんでした。
このバグレポートは2.15.9にのみ存在します。実際の動作には影響しません。ただし、エラーが報告された場合は、バージョンを 2.15.9 未満に下げることができます。会社
のプロジェクトはすべてバージョン 2.12 を使用しているため、npm install [email protected] -s だけで済みます。
element ui git https://github.com/ElemeFE/element/issues/21905をご覧ください
。最初にエラーを報告したとき、バージョンの問題には気づきませんでした。後で古いプロジェクトを見てみると、 node_modules の picker.vue が現在使用されているものと異なっていました。そのとき初めて、バージョンの問題であることがわかりました
。package.json の要素 ui で表示されるバージョンは 2.12 でした。
他のものをインストールするときに問題が発生したため、package-lock.json と node_modules の両方を削除してから、npm install を実行しました。その結果、package.json のバージョンは、実際にインストールされているバージョンと同じバージョンではなくなりました。そうしないと、この問題が発生します。
ダウングレードしたくない場合は
、次のコードを main.js に追加できます。
import Vue from 'vue'
import ElementUI from 'element-ui'
function RepairProps(cmp) {
(cmp.mixins || []).forEach(mixin => {
if (mixin.props && mixin.props.placement) {
const defaultValue = mixin.props.placement.default
mixin.data = new Proxy(mixin.data, {
apply(target, thisArg, argArray) {
const res = Reflect.apply(target, thisArg, argArray)
return {
...(res || {
}),
placement: defaultValue
}
}
})
delete mixin.props.placement
}
if (mixin.mixins && mixin.mixins.length > 0) {
RepairProps(mixin)
}
})
}
RepairProps(ElementUI.DatePicker)
RepairProps(ElementUI.TimePicker)
RepairProps(ElementUI.TimeSelect)
Vue.use(ElementUI, {
size: 'medium'
})
ああ、今日も騙された日です。参考になったら高評価をお願いします。