Aquí está mi código (es un componente Vue en una aplicación Nuxt):
<template> <div class="comment-editor" v-if="loggedIn"> <div class="leftside"> <!-- <client-only> --> <textarea ref="editor" v-model="content" placeholder="your comment" ></textarea> <!-- </client-only> --> <Message v-bind="message" /> </div> <Button text="Publish" color="main" v-if="message.type != 'loading'" @click="publish" /> </div> <div class="notLoggedIn" v-else> You should <nuxt-link to="/signup">register</nuxt-link> or <nuxt-link to="/login">log in</nuxt-link> to write comments. </div> </template> <script> export default { data() { return { content: "", }; }, mounted() { const tx = document.querySelector("textarea"); fh(tx); tx.style.overflowY = "hidden"; tx.addEventListener("input", function () { fh(this); }); function fh(x) { while (x.style.height + "" != x.scrollHeight + "px") x.style.height = x.scrollHeight + "px"; } }, }; </script>Lo que puede ver en la función "montada" se usa para cambiar dinámicamente la altura de un área de texto. Funciona correctamente cuando el componente se procesa en el lado del cliente (es decir, cuando se navega desde otra página), pero la aplicación falla después de SSR (cuando se abre directamente la página con el componente). ¿Cómo hacer que ese código funcione correctamente en ambos casos?
Debe usar estilos dinámicos en lugar de manipulaciones DOM directas.
Por ejemplo, <textare :style="{ height: computedHeight }" />
Consultehttps://vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
El problema era que cuando se montaba el componente, inicialmente, el elemento class="leftside" no formaba parte del dom (debido a que loginIn era igual a false). La solución fue mover el elemento class="leftside" y la función montada() a un componente separado.