vue3 - nuxt3 这样为什么不可以，提示错误？

Question

增加一个属性为什么会报错 class_name, class_name2 又可以

<script setup>
const generateUniqueString = (length) => {
    // const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result = '';
    let i;

    for (i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * chars.length);
        result += chars.charAt(randomIndex);
    }

    return result;
}

const list = ref([
    {
        title: 'title1',
    },
    {
        title: 'title2',
    },
    {
        title: 'title3',
    },
    {
        title: 'title4',
    },
])
list.value.forEach((value, index) => {
    value.class_name2 = 'name-' + index
    value.class_name = generateUniqueString(7)
})
</script>

<template>
    <div v-for="(dt, index) in list" :key="index">
        <div :class="dt.class_name">{{dt.title}}</div>
    </div>
</template>

<style scoped>

</style>

Answer 1

因为你尝试使用随机数生成器生成一个随机类名，而服务端和客户端生成的类名不一致。

尝试使用一个能够在服务端和客户端生成一致随机数的工具，或者将这个组件改为客户端渲染。