Vue 3 - 动态道具未通过

Question

Component - Groups.vue

   <MainTable
      @next="getNextGroup"
      @prev="getPrevGroup"
      @start="getGroups"
      :columns="tableColumns"
      :data="groupsData"
    />
  </div>
</template>

<script setup>
import MainTable from "../../components/MainTable/index.vue";
import { useGroupsStore } from "../../store/groups";
import { onMounted, reactive, ref } from "vue";
const groupStore = useGroupsStore();
let groupsData = reactive([{}]);
let tableColumns = ref([
  {
    label: "Название",
    prop: "title",
  },
  {
    label: "Время",
    prop: "time",
  },
  {
    label: "Количество мест",
    prop: "count",
  },
]);
const getGroups = async () => {
  const res = await groupStore.getGroups();
  console.log("groupsData", groupsData);
};

const getNextGroup = async () => {
  const res = await groupStore.getGroupsNext();
  console.log("groupsData", groupsData);
};
const getPrevGroup = async () => {
  const res = await groupStore.getGroupsPrev();
  console.log("groupsData", groupsData);
};
</script>

And parent component- MainTable.vue

<script setup>
import { toRefs, onMounted, watch } from "vue";

const emit = defineEmits(["next", "prev", "start"]);
const props = defineProps({
  columns: Array,
  data: Array,
});

let { data: tableData } = toRefs(props);

onMounted(() => {
  emit("start");
});

const next = () => {
  emit("next");

};
const prev = () => {
  emit("prev");

};
</script>

I get the data and write it to groupsData, but the data is not updated in MainTable.

I use torres and still an empty array, or just a Proxy comes.

tried using reactive and ref Or you need to use computed

Why props may not change reactively?

Answer 1

I think the problem is you've initialised groupData as a reactive object but then you're replacing it with a non reactive object.

There are a couple ways to achieve what you want.

1. Use a reactive object and modify one of its properties rather than replacing the whole object:

const data = reactive({ groups: [] });
data.groups = await groups store.getGroups();

2. Use ref instead of reactive

const groupsData = ref([]);
groupsData.value = await groupStore.getGroups();

Please note that a ref is a Proxy object. You can refer to groupData directly in the template but to get or set its value in the script you have to use groupData.value as above.