设置 VueJS 获取数据

Question

我无法获取数据。 我使用 axios 获取数据并使用 console.log 打印它们，这是我在控制台中的内容：

我看到了我的数据和长度，但我没有成功在我的代码中使用它们。我想以 for 为例：

for(var i; i<temp.length; i++){
        console.log(temp.name)
      }

这不起作用，因为 temp.lenght 给出 0。或者我只想打印我的第一个参数 name: MONITOR ... 但我也没有成功。

你知道我们是怎么做到的吗？

这里是我的其余代码：

setup() {
    const temp=[];
    onMounted(() => {
      axios.get('http://localhost:8080/data/mock.json')
          .then((data) => (temp.value = data.data.data))
      console.log(temp)
      for(var i; i<temp.valueOf().length; i++){
        console.log(temp.name)
      }
    });
return{temp}
}

Answer 1

您应该将 for 循环放在 then 回调中并使用 ref 来初始化 temp ：

import {ref} from 'vue'
...
setup() {
    const temp=ref([]);
    onMounted(() => {
      axios.get('http://localhost:8080/data/mock.json')
          .then((data) => {
             temp.value = data.data.data
               for(var i; i<temp.value.length; i++){
                   console.log(temp.name)
                }

          })
      console.log(temp)
    
    });


   return{temp}
}