[英]How to manipulate DOM both after server-side and client-side rendering?
这是我的代码(它是 Nuxt 应用程序中的 Vue 组件):
<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>
您在“已安装” function 中看到的内容用于动态更改文本区域的高度。 当组件在客户端渲染时(即从另一个页面导航时),它可以正常工作,但应用程序在 SSR 后崩溃(当直接打开带有组件的页面时)。 如何使该代码在这两种情况下都能正常工作?
您应该使用动态样式而不是直接的 DOM 操作。
例如, <textare:style="{ height: computedHeight }" />
见https://v2.vuejs.org/v2/guide/class-and-style.html#Object-Syntax-1
问题是,当组件被安装时,最初,class="leftside" 元素不是 dom 的一部分(由于loggedIn 等于false)。 解决方案是将 class="leftside" 元素和 mounted() function 移动到单独的组件中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.