错误写法：
vue 动态设置变量 let dateTimeShow${item.name} = ref(false)
在 Vue 3 中，使用动态变量名（如 let dateTimeShow${item.name} = ref(false)）并不是一个标准的做法，因为 JavaScript 的变量名在定义时是静态的。相反，你可以使用对象来动态存储这些变量。这样可以根据 item.name 动态管理多个 ref 变量。
正确写法：
使用对象存储动态变量
你可以创建一个响应式对象来存储所有的动态变量。例如：
import { reactive, ref } from 'vue';
export default {
setup() {
// 示例数据
const items = [
{ name: 'item1' },
{ name: 'item2' },
{ name: 'item3' }
];
// 创建一个响应式对象来存储动态变量
const dateTimeShow = reactive({});
// 初始化动态变量
items.forEach(item => {
dateTimeShow[item.name] = ref(false);
});
return {
dateTimeShow,
items
};
}
};
在模板中使用
然后，你可以在模板中使用这个动态变量：
<template>
<div>
<div v-for="item in items" :key="item.name">
<p>{{ item.name }}</p>
<button @click="dateTimeShow[item.name] = !dateTimeShow[item.name]">Toggle</button>
<p v-if="dateTimeShow[item.name]">Show DateTime for {{ item.name }}</p>
</div>
</div>
</template>
总结
- 动态变量：使用对象来动态管理多个 ref 变量，而不是尝试使用动态名称的变量。
- 响应式：通过 reactive 创建一个响应式对象，容纳所有动态变量。
- 操作简便：在模板中可以方便地访问和修改这些动态变量。
通过这种方式，你可以灵活地管理多个动态变量，保持代码清晰和可维护。
