錯誤寫法：

vue 動態(tài)設置變量 let dateTimeShow${item.name} = ref(false)

在 Vue 3 中，使用動態(tài)變量名（如 let dateTimeShow${item.name} = ref(false)）并不是一個標準的做法，因為 JavaScript 的變量名在定義時是靜態(tài)的。相反，你可以使用對象來動態(tài)存儲這些變量。這樣可以根據(jù) item.name 動態(tài)管理多個 ref 變量。

正確寫法：

使用對象存儲動態(tài)變量
你可以創(chuàng)建一個響應式對象來存儲所有的動態(tài)變量。例如：

import { reactive, ref } from 'vue';

export default {
  setup() {
    // 示例數(shù)據(jù)
    const items = [
      { name: 'item1' },
      { name: 'item2' },
      { name: 'item3' }
    ];

    // 創(chuàng)建一個響應式對象來存儲動態(tài)變量
    const dateTimeShow = reactive({});

    // 初始化動態(tài)變量
    items.forEach(item => {
      dateTimeShow[item.name] = ref(false);
    });

    return {
      dateTimeShow,
      items
    };
  }
};

在模板中使用

然后，你可以在模板中使用這個動態(tài)變量：

<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>

總結

• 動態(tài)變量：使用對象來動態(tài)管理多個 ref 變量，而不是嘗試使用動態(tài)名稱的變量。
• 響應式：通過 reactive 創(chuàng)建一個響應式對象，容納所有動態(tài)變量。
• 操作簡便：在模板中可以方便地訪問和修改這些動態(tài)變量。
  通過這種方式，你可以靈活地管理多個動態(tài)變量，保持代碼清晰和可維護。