Vue 3列表未更新

xqnpmsa8 于 2022-12-04 发布在 Vue.js

关注(0)|答案(2)|浏览(135)

我们从以下API获取数据：

<script setup>
import { onMounted, inject } from 'vue'

let list = [];

function init() {
    axios
        .post("/some-link/here")
        .then((o) => {
            list = o.data.bla;
            console.log(list);
        })
        .catch((o) => {
            //TO DO 
        });
}

onMounted(() => {
    init();
});
</script>

console.log正确显示列表。
但在模板上，它不会更新。

<p v-for="(val, index) in list" :key="index">
   {{ val.name }}
</p>

vue.js

来源：https://stackoverflow.com/questions/74672441/vue-3-list-does-not-update

2条答案

按热度按时间

u4dcyp6a1#

这个很好用

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

const users = ref([]);

async function fetchData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  return await response.json();
}

onMounted(async () => {
  users.value = await fetchData();
});
</script>

<template>
  <div v-for="user in users" :key="user.id">
    {{ user.id }} 👉 {{ user.name }}
  </div>
</template>

这里是Playground。

赞(0）回复(0）举报 2022-12-04

8yparm6h2#

您应该使用ref/reactive表示React性数据，字母list = ref（[]）;

赞(0）回复(0）举报 2022-12-04