我有一个简单的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>
然后,我在模板中使用cDummy
const中的数据:
<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
,依此类推.
为什么会发生这种事?