Vue 3如何从服务器动态加载数据并在v-for循环中显示

b1payxdu 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(163)

我想在v-for循环中动态显示数据库中的数据，但是，如果我尝试将新数据推送到数组中，它们会正确地显示在console.log（）中，但模板中没有任何变化。
我在Codepen中对此做了一个简化表示：

<template>
  <ul v-for="number in numbers">
    <li>{{ number.num }} : {{ number.text }}</li>
  </ul>
  {{ numbers }}
</template>

<script setup>
let numbers = [
  { num: 1, text: "One" },
  { num: 2, text: "Two" },
  { num: 3, text: "Three" }
];

// simulate server
setTimeout(() => {
  numbers.push({ num: 4, text: "Four" });
  console.log(numbers); // returns the array correct
}, 3000);
</script>

链接到代码段：https://codepen.io/Tenarius/pen/QWBLOJZ
有人能帮帮我吗？

vue.js

来源：https://stackoverflow.com/questions/74833007/vue-3-how-to-dynamically-load-data-from-server-and-show-in-a-v-for-loop

1条答案

按热度按时间

fcg9iug31#

当使用vue时，变量必须是对数据更改的React。它也可以在.value上访问。阅读有关https://vuejs.org/guide/essentials/reactivity-fundamentals.html的更多信息并访问参考https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs
下面是一个工作代码示例

<template>
  <ul v-for="number in numbers">
    <li>{{ number.num }} : {{ number.text }}</li>
  </ul>
  {{ numbers }}
</template>

<script setup>
import { ref } from 'vue'
let numbers = ref([
  { num: 1, text: "One" },
  { num: 2, text: "Two" },
  { num: 3, text: "Three" }
]);

// simulate server
setTimeout(() => {
  numbers.value.push({ num: 4, text: "Four" });
  console.log(numbers); // returns the array correct
}, 3000);
</script>

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

我来回答

Vue 3如何从服务器动态加载数据并在v-for循环中显示

1条答案

相关问题

热门标签

最新问答