3

我正在为我的组件使用 Vuejs Composition Api，并为我的数据使用了响应式和 ref。

基于https://vue-composition-api-rfc.netlify.com/api.html#ref，他们应该在已传递给他们的对象的深层工作并使其具有反应性。

我目前面临一个问题，似乎模板在数据更改后没有重新加载，或者它似乎不是反应性的。

正如您在 onMounted 钩子中看到的那样，将获取数据并在 Table 组件中显示没有任何问题，但是在数据表之前加载的预选记录将不会更新

直到我在 :key 中使用 assignedList.length 来强制它重新渲染它。

我想知道我哪里弄错了。我真的很困惑这些是如何工作的，我们应该如何使用它们？这是代码：

<template>
      <Table
        :key="assignedList.length"
        :table="dataTable"
        :pre-selected-records="assignedList"
      />
</template>

<script lang="ts">
import {
  createComponent,
  onMounted,
  PropType,
  ref
} from "@vue/composition-api";
import { DataTable } from "@/mixins/Helpers/DataTableHelper/DataTable.Helper.mixin";
import { Device} from "@/types";
import {
  api_fetchAssignedProfilesToDevice
} from "@/api/api_device";
import Table from "@/views/components/Table.vue";
import {
  mocked_assign_tableKeys,
  mocked_assign_tabs
} from "@/api/mock/assign.mock";

export default createComponent({
  name: "Assignment",
  components: {
    Table
  },
  props: {
    page: {
      type: String,
      default: "device",
      required: true
    },
    target: {
      type: Object as PropType<Device | Group>,
      required: true
    }
  },
  setup(props, context) {
    const tableKeys: { [index: string]: any } = mocked_assign_tableKeys(
      context.root.$locale
    );
    const dataTable = ref(
      new DataTable(tableKeys.profile.th, tableKeys.profile.td) as DataTable
    );
    const assignedList= ref([]);
    onMounted(async () => {
        let { assignable, assigned } = await api_fetchAssignedProfilesToDevice(
        props.target.id
      );
      await dataTable.value.fetchTableList(async () => [
        ...assignable,
        ...assigned
      ]);
      assignedList.value =assigned;
    });
    return {
      dataTable,
      assignedList,
    };
  }
});
</script>

<style lang="scss" scoped></style>
4

0 回答 0