Question

我有2个来自API的数据 1.类别食品 2.做好如何在1页的Vue中显示来自API的2个数据，

我只能显示1个来自API的数据

这就是我尝试过的

export default {
 data(){
   items:[],
   finish_goods:[],

    created() {
      let uri = 'http://192.168.10.75:8000/api/finish_goods'; // Data 1
      this.axios.get(uri).then(response => {
        this.items = response.data.data;
      });
    },
    created() {
      let uri = 'http://192.168.10.75:8000/api/cat_foods';  // Data 2
      this.axios.get(uri).then(response => {
        this.finish_goods = response.data.data;

      });
    }
},
methods: {}

}

Answer 1

我的建议，将API组合为1

IsConvertible<std::string, int>

Answer 2

您的做法正确无误，但看起来您的模板语法有点混乱...

// Make sure axios is installed via npm, you can skip this step
// if you've declared window.axios = axios somewhere in your app...
import axios from 'axios';

export default {
    // Data must be a function that returns the initial state object...
    data() {
        return {
            finishGoods: [],
            catFoods: []
        };
    },

    // Created is a hook and can only be defined once, think of it like an event listener...
    created() {
        let finishGoodsUri = 'http://192.168.10.75:8000/api/finish_goods';

        // Fetch finish goods, note that I'm not calling this.axios...
        axios.get(finishGoodsUri).then(response => {
            this.finishGoods = response.data.data;
        });

        let catFoodsUri = 'http://192.168.10.75:8000/api/cat_foods';

        // Fetch cat foods...
        axios.get(catFoodsUri).then(response => {
            this.catFoods = response.data.data;
        });
    }
}

现在，您可以在模板中执行以下操作：

<template>
    <div>
        <div v-for="finishGood in finishGoods">
            {{ finishGood.attribute }}
        </div>

        <div v-for="catFood in catFoods">
            {{ catFood.attribute }}
        </div>
    </div>
</template>

从API laravel获取2个数据

2 个答案: