将 API 中的数据渲染到 Vue 模板中

Question

我在 vue 中成功获取了 api，但是如何正确渲染呢？ “undefined id of null”是我在控制台错误中得到的

这是我打的 axios 调用

  axios.getOrder(id).then(response => {
    this.cart_content = response.data
    console.log(this.cart_content)
  })

这就是我尝试在 vue 中渲染的方式

       <div v-if="cart_content">
          <ul v-for="i in cart_content" :key="i.id">
            <li>
              <p>{{i.name}}</p>
              <p>{{i.items.quantity}}</p>
              <p>{{i.items.unit_price}}</p>
            </li>
          </ul>
        </div>

当我 console.log 时 API 可用，它看起来像这样。

id:'',
data:array[1]

“数据数组”是我需要的详细信息，谁能告诉我如何获取这些数据。

Answer 1

显然我的代码没有错，毕竟我只需要从响应中包含对象数组的名称就可以在 v 中获得我想要的 (cart_content.data)，感谢您在这里帮助我，感谢您时间

Answer 2

methods: {
getsomething(){
var apicall = axios.get("https://jsonplaceholder.typicode.com/users");
apicall.then(resp => {
for(var x = 0; x < resp.data.length; x++){
for(var dataCount = 0; dataCount < resp.data.length; dataCount++)
{
if(resp.data[dataCount].id == resp.data[x].id)
{
this.cart_content = resp.data[x].id;
}
}
}
})
}
}

<template>
<div>
  <div v-if="cart_content">
          <ul v-for="i in cart_content" :key="i.id">
            <li>
              <p>{{i.name}}</p>
              <p>{{i.items.quantity}}</p>
              <p>{{i.items.unit_price}}</p>
            </li>
          </ul>
        </div>
</div>
</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Answer 3

因为您的数据是以异步方式收集的，所以它最初对您的组件不可用，因此会出错。您需要在组件生命周期方法中获取数据，如下所示：

import axios from 'axios';

export default {
  data() {
    return {
      cart_content: [],
      id: ''
    }
  },
  created() {
    this.getOrder(this.id)
  },
  methods: {
    getOrder(id) {
      axios.getOrder(id)
        .then(response => {
          this.cart_content = response.data;
        });
    }
  }
}

Working CodeSandbox Example