Vue - 组合 API 反应中的数组未在 DOM 中更新

Question

我在 reactive() 中有一个帖子数组，我希望它在 Mounted 上更新。

我该怎么做？

模板：

<q-card>
  <board-item-list :items="items" v-if="items.length" />
  <board-empty v-else />
</q-card>

脚本

import { reactive, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    let items = reactive([]);
    ...
    onMounted(() => {
      // to fill the items with posts.
      items.values = posts; // I tried this not working
      items = posts; //I tried this not working
      console.log(items);
    });
    ...
    return {
      ...
      items,
    };
  },
};

Answer 1

尝试使用 ref 而不是 reactive 或将 items 定义为处于反应状态的嵌套字段，如 :

import { reactive, onMounted } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    let state= reactive({items:[]});
    ...
    onMounted(() => {
     
      state.items = posts; 
      console.log(state.items);
    });
    ...
    return {
      ...
      state,
    };
  },
};

在模板中：

<q-card>
  <board-item-list :items="state.items" v-if="state.items.length" />
  <board-empty v-else />
</q-card>

如果你想去掉模板中的 state，你可以使用 toRefs:

import { reactive, onMounted,toRefs } from "vue";
import { posts } from "./fake-data.js";
export default {
  setup() {
    let state= reactive({items:[]});
    ...
    onMounted(() => {
     
      state.items = posts; 
      console.log(state.items);
    });
    ...
    return {
      ...toRefs(state),//you should keep the 3 dots
    };
  },
};

Vue - 组合 API 反应中的数组未在 DOM 中更新

Vue - composition API Array inside reactive is not updating in the DOM

javascript

vue.js

vuejs3

vue-composition-api