Estoy tratando de implementar un componente llamado CamViewMatrix en Vue.js. Mi requisito es obtener el ancho del padre de CamViewMatrix dentro de sí mismo (digamos en el método created() de CamViewMatrix) para poder hacer algunos cálculos con él (hay algunos gráficos basados en el tiempo que deben responder, lo cual no es posible a menos que se dispone de un valor inicial para el ancho).
<div> <div class='controller-wrapper'> ... </div> <CamViewMatrix v-bind:cameras='cams' /> </div> Intenté asignar una id a su padre y pasé lo mismo como accesorio a CamViewMatrix, e intenté getElementById , pero no pude. Código dado a continuación:
<div id='parentid'> <div class='controller-wrapper'> ... </div> <CamViewMatrix v-bind:cameras='cams' parentId='parentid' /> </div>Y dentro del componente CamViewMatrix:
<script> export default { name: 'CamViewMatrix', props: { parentId: { type: String, required: true, }, ... }, created() { console.log(document.getElementById(this.parentId)); // 👈️ logs null ... } } Con el código anterior, no puedo obtener el elemento principal (está registrando null ).
También intenté usar ref y $parent , pero no pude. Amablemente ayúdame con esto.
Gracias por adelantado.
created() es el enlace de ciclo de vida incorrecto para hacer eso.
Si revisa el diagrama del ciclo de vida de los documentos: https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
El material del elemento aún no está hecho (renderizado) y solo se crea la instancia.
Lo más probable es que hagas eso en el mounted .
A continuación, puede acceder al componente principal a través de this.$parent y al elemento a través this.$parent.$el .
Consulte: https://vuejs.org/v2/api/#Instance-Properties
Si desea un elemento específico del padre, cree una referencia y acceda a ella como:
this.$parent.$refs.refNameYouAdded
Si es un componente de Vue, entonces sería una instancia de Vue, por lo que debe acceder a $el nuevamente:
this.$parent.$refs.refNameYouAdded.$el
de lo contrario, si es un elemento HTML, entonces no es necesario hacerlo.
la mayoría de las veces, las respuestas anteriores funcionan, pero a veces, si su componente principal hace cosas como mover elementos a otro lugar, es posible que no sea preciso.
como se menciona en el comentario, aún puede acceder al elemento principal correcto haciendo:
this.$el.parentElement