Al escribir un nuevo proyecto en los últimos dos días, encontré un error en el selector de fecha y hora de la interfaz de usuario del elemento.
[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"
Este error no afecta el funcionamiento real, pero parece muy incómodo.
resolver
Según el informe de error, el error fue informado por el archivo selector en el elemento ui data-picker. Encontré este archivo vue en node_modules y descubrí que se
agregó una ubicación al valor de accesorios: Popper.props.placement.
Cuando se creó, la ubicación tenía una operación de asignación this .placement = PLACEMENT_MAP[this.align] || PLACEMENT_MAP.left; Esto resulta en un error.
El proyecto anterior no informó un error porque no había ninguna ubicación en los accesorios en la versión. Solo había una operación de asignación para la ubicación cuando se crea, por lo que no habría ningún error
porque este informe de error solo existe en 2.15.9 . No afecta la operación real. Sin embargo, si se informa un error, puede reducir la versión a menos de 2.15.9.
Todos los proyectos de la compañía usan la versión 2.12, por lo que solo npm install [email protected] -s
Puedes echar un vistazo a element ui git https://github.com/ElemeFE/element/issues/21905
. Cuando informé el error por primera vez, no estaba al tanto del problema de la versión. Más tarde, vi en el proyecto anterior que picker.vue en node_modules era diferente del que se usa ahora. Sólo entonces descubrí que era un problema de versión.
La versión mostrada por el elemento ui en mi paquete.json era 2.12.
Debido a que hubo un problema al instalar otras cosas, eliminé package-lock.json y node_modules, y luego npm install. El resultado es que la versión de package.json no es la misma que la versión instalada real. De lo contrario, este problema no ocurre y aún necesita instalar el elemento npm por separado
. [email protected] -sSi
no desea degradar, puede agregar el siguiente código a 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'
})
Ah, es otro día en el que te engañan. Por favor, dale el visto bueno si te ayuda.