将数据从 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

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

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;
        });
    }
  }
}

工作 CodeSandbox 示例

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

显然，我的代码并没有错，毕竟我只需要在响应中包含对象数组的名称即可在 v-for 中获得我想要的内容（cart_content.data），感谢您帮助我，感谢您的时间