Работает ли vue api "ref or active" на шаблоне? - PullRequest
Новая
       15

Работает ли vue api "ref or active" на шаблоне?

2 голосов
/ 11 марта 2020

Я использую Vuejs Composition Api для моего компонента и использовал как реактивный, так и ref для своих данных.

На основании https://vue-composition-api-rfc.netlify.com/api.html#ref они должны работать на глубокой стороне объекта, который был им передан, и сделать их реактивными.

В настоящее время я столкнулся с проблемой кажется, что шаблон не перезагружается после того, как данные были изменены, или, возможно, кажется, что он не реагирует

Как вы можете видеть в ловушке onMounting, данные будут извлечены, и они будут без проблем отображаться в компоненте Table, но предварительно выбранные записи, которые были загружены перед датируемыми данными, не будут обновлены

, пока я не использовал assignList.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>
...