我有一个简单的VUE签到/注册表格. 我已经为占位符准备了有趣的虚拟数据,所以每次页面重新加载时,它都会在我的表单中显示一个随机的人数据:

<script setup lang="ts">
    const isLogin = ref(true);

    const dummyData = [
        ['Euclid', 'euclid@greece.old'],
        ['Gauss', 'gauss@math.king'],
        ['Einstein', 'albert@relative.phys'],
    ];

    const cDummy = dummyData[Math.floor(Math.random()*dummyData.length)];
</script>

然后,我在模板中使用cDummyconst中的数据:

<template>
    <label v-if="!isLogin">
        <div>Name</div>
        <input type="text" :placeholder="cDummy[0]" required>
    </label>
    <label>
        <div>Email</div>
        <input type="email" :placeholder="cDummy[1]" required>
    </label>

    <a @click="isLogin = !isLogin">{{ modeLabels.switchText }}</a>
</template>

问题是,当我更改Active isLogin变量时,新添加的输入Name字段占位符名称有时不适合虚拟邮箱.例如,邮件是gauss@math.king,添加的名字是Euclid,依此类推.

为什么会发生这种事?

推荐答案

Nuxt3实际上是在做渲染twice:一个在服务器上生成即时的HTML并向站点访问者显示至少一些内容,另一个在浏览器中支持页面交互.

因此,服务器计算它自己的cDummy值,当涉及到浏览器时,它再次计算cDummy,这可能会有所不同.

为了解决这个问题,您需要创建客户端-服务器共享变量,可以使用useState来完成.

const cDummy = useState('cDummy', () => { dummyData[Math.floor(Math.random()*dummyData.length)] });

它创建了一个响应式的值,然后将其与生成的HTML和其他数据一起传递给客户端.稍后在浏览器中,它使用已经在服务器上生成的值,而不是生成另一个.

同时,非常感谢@DarrylNoakes@RaphaelRlt帮助我了解正在发生的事情!

Javascript相关问答推荐

使脚本兼容于其他YouTube URL格式

Python类实现的JavaScript吊坠是什么样子的?

使用ReactJS对Ant Design表中的空值进行排序

使用useParams路由失败

使用typeof运算符获取对象值类型-接收字符串而不是数组

在页面上滚动 timeshift 动垂直滚动条

如何在RTK上设置轮询,每24小时

togglePopover()不打开但不关闭原生HTML popover'

无法在nextjs应用程序中通过id从mongoDB删除'

引用在HTMLAttributes<;HTMLDivElement>;中不可用

以Angular 实现ng-Circle-Progress时出错:模块没有导出的成员

邮箱密码重置链接不适用于已部署的React应用程序

如何使用基于promise (非事件emits 器)的方法来传输数据?

Phaserjs-创建带有层纹理的精灵层以自定义外观

将嵌套数组的元素乘以其深度,输出一个和

背景动画让网站摇摇欲坠

输入的值的类型脚本array.排序()

Reaction useState和useLoaderData的组合使用引发无限循环错误

JavaScript将字符串数字转换为整数

与在编剧中具有动态价值的定位器交互