Vue 3 - 动态道具未通过

Question

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

和父组件- 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>

我获取了数据并写入了groupsData，但是MainTable中的数据没有更新。

我使用 torres，但仍然是一个空数组，或者只是一个 Proxy。

尝试使用 reactive 和 ref 或者你需要使用 computed

为什么 props 不能响应式改变？

Answer 1

我认为问题在于您已将 groupData 初始化为反应对象，但随后您将其替换为非反应对象。

有几种方法可以实现您想要的效果。

使用反应对象并修改其属性之一而不是替换整个对象：

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

使用ref代替reactive

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

请注意 ref 是一个 Proxy 对象。您可以直接在模板中引用 groupData，但要在脚本中获取或设置它的值，您必须像上面那样使用 groupData.value。

Vue 3 - 动态道具未通过

Vue 3 - Dynamic props are not passed

javascript

vue.js

vuejs3

vue-composition-api