Vue 3中如何从其他数据中引用数据

Question

我有一个数组 [] 作为常量存储在 Vue 3 setup() 方法中。该数组由 X 个对象组成，是表单响应的一部分。

我想在我的内部仪表板的单个动态页面中显示每个对象，在模板中使用 v-for 作为 div，因此我不必重复标记代码。为此，我想我可以做这样的事情：

<template>
  <div>
    <div v-for="(item, index) of entries" :key="index">
      <dt class="text-sm font-medium text-gray-500">{{ item.label }}</dt>
      <dd class="mt-1 text-sm text-gray-900">{{ item.response }} // Comes empty in the template</dd>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { supabase } from "../utils/supabaseClient.js";

export default {
  setup() {
    const data = ref({
      // It's an empty object, (all of them are strings) data is populated onMounted but it comes undefined, I also tried in beforeEnterRoute with no success
      name: "John Example",
      company: "Example Company",
      radio: "False",
    });

    const entries = ref([
      // ... more entries before this one
      {
        label: "Name",
        response: data.value.name, // this one comes undefined, as all the others I could put here.
      },
      {
        label: "Name of the company",
        response: data.value.company, // this one comes undefined, as all the others I could put here.
      },
      {
        label: "Do you have something to add?",
        response: data.value.radio, // this one comes undefined, as all the others I could put here.
      },
    ]);

    onMounted(async () => {
      //api call made with supabase client because I'm using their service.
      let { data: rows, error } = await supabase.from("submissions").select("*").order("date_submitted", { ascending: false });

      if (error) {
        console.log(error);
        return;
      }

      data.value = rows;
    });

    return {
      data,
      entries,
    };
  },
};
</script>

我还想指出，我已经尝试使用 beforeRouteEnter 和 onBeforeMounted，但没有成功。

Answer 1

entries 应该是基于 data 的 computed prop，因为它对 data 的更改有反应：

import { computed } from 'vue'

export default {
  setup() {
    //...

    const entries = computed(() => [
      {
        label: "Name",
        response: data.value.name,
      },
      {
        label: "Name of the company",
        response: data.value.company,
      },
      {
        label: "Do you have something to add?",
        response: data.value.radio,
      },
    ]);

    //...
  }
}

demo

Vue 3中如何从其他数据中引用数据

How to reference data from other data in Vue 3

javascript

vue.js

vuejs2

vuejs3

vue-composition-api