En mi función, estoy usando ref, que está vinculada al enlace, y cuando intento cambiar el color ( ref.style.color = 'red' ), veo un error. Porque ref que está vinculado a nuxt-link es Object, y no tiene propiedad de estilo. Sé que puedo usar la etiqueta <a></a> , pero ¿alguien tiene ideas de cómo puedo hacerlo con nuxt-link ?
Más información: tengo un enlace
<nuxt-link ref="card" @mousemove.native="move" @mouseleave.native="leave" @mouseover.native="over"> Click </nuxt-link>En mi función, quiero cambiar la posición del enlace, usando la transformación.
move () { const card = this.$refs.card card.style.transform = `perspective(500px)` }Fin me sale este mensaje en la consola
TypeError: Cannot set properties of undefined (setting 'transform')
Al seleccionar nuxt-link usando $refs refs solo devolverá el componente Vue en lugar del elemento de nodo debido a que nuxt-link es un componente en Nuxt.js.
La forma correcta de seleccionar un elemento de nodo es usando $el .
Respuesta referida desde aquí .
Ejemplo:
const card = this.$refs.card.$el card.style.transform = `perspective(500px)` Para ser mencionado , no estoy seguro de lo que intenta lograr, pero suponiendo que desea modificar el estilo de un elemento en Vue, se supone que debe usar :style="theElementStyles" y luego solo actualiza el estilo del elemento con this.theElementStyles = { transform: 'perspective(500px)' } .
Puede consultar más detalles sobre el enlace de estilo en línea en la documentación de Vue .