[Vuejs]-Get 2 data from API laravel

by

0👍

✅

You’re along the right lines, but it looks like your template syntax is a bit messed up…

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

Now in your template you can do the following:

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

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

0👍

my advice, combine the API as 1

created() {
      let uri = 'http://192.168.10.75:8000/api/combine_data';  // sample
      this.axios.get(uri).then(response => {
        this.finish_goods = response.data.data.goods;
        this.items = response.data.data.foods;
      });
    }

Leave a comment