使用对象存储动态变量

错误写法:

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 创建一个响应式对象,容纳所有动态变量。
  • 操作简便:在模板中可以方便地访问和修改这些动态变量。
    通过这种方式,你可以灵活地管理多个动态变量,保持代码清晰和可维护。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容