Home / Questions / 161408
Accepted
Felipe
Asked: 2020-05-04 15:11:50 +0800 CST 2020-05-04 15:11:50 +0800 CST

Vue doesn't display data in view

  • 772

I have a small api made in Laravel, it is working without problems and all the tests in Postman are successful, the problem is when I try to show the data by the Vue view, it just doesn't show me anything, not even errors

This is the view code

<template>
    <div id="home" class="container">
        <div class="row justify-content-center">
           <div class="col-md-8">
               <div class="card card-default" v-for="product in products" 
                  :key="product.id">
                    <div class="card-header">{{product.name}}</div>
                    <div class="card-body">
                         {{product.totalPrice}}
                    </div>
               </div>
            </div>
        </div>
    </div>
</template>
<script>
   export default {
      data() {
          return {
              products: [],
          }
      },
      created(){
          this.allProducts();
      },
      methods: {
        allProducts(){
            let self = this;
            let urlAllProducts = '/api/products';
            axios.get(urlAllProducts)
                .then(response => {
                    self.products = response.data;
                })
                .catch(err => {

                })
          }
      },
   }
 </script>

ProductController

public function index()
{
    return ProductCollection::collection(Product::all());
}

Api.php file

Route::apiResource('/products', 'ProductController');
Route::group(['prefix' => 'products'], function(){
    Route::apiResource('/{product}/reviews','ReviewController');
});

The view looks like this

enter image description here

I'm a couple of hours already messed with this problem.

Any ideas? I use Laravel 5.6, Vuejs 2

laravel

1 Answers

  1. Best Answer

    I would be missing to see the code of the view and the response you are getting when making the api call from the component, but based on my experience I think you have 2 options:

    1- If you are using the component in a blade view you don't need to have an api query method to get the products, you send the array to the component and that's it (it should see the view)

    Example in blade view: 

    <all-products :products="{{$products}}"/>

    2- In the event that you are not sending the list of products to the view, you should make the call to the api with its absolute url. See this answer
    You could also define a variable urlin the component and pass it the url from the view and then use the method to get the products.
    Example:
    In vue component 

    <script>
   export default {
      data() {
          return {
              products: [],
              url: '', // también lo podes pasar como props
          }
      },
      created(){
          this.allProducts();
      },
      methods: {
        allProducts(){
            let self = this;
            let urlAllProducts = this.url + '/api/products';
            axios.get(urlAllProducts)
                .then(response => {
                    self.products = response.data;
                })
                .catch(err => {

                })
          }
      },
   }
 </script>

    In blade view 

    <all-products :url="{{url('/'}}"/>
    • 2