Vue does not show the data in the view

Question

Vue does not show the data in the view

Navigation

#1 by (2 votes)

0

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 simply does not show me anything, not even errors

This is the code of the view

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

File Api.php

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

The view looks like this

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

Any ideas? I occupy Laravel 5.6, Vuejs 2

laravel laravel-5 vue.js

asked by Felipe 04.05.2018 в 01:11

source

1 answer

How to correctly parse the response of an ajax request? Print output of the console in txt file using Python [closed]

score 2 · Accepted Answer

I would be missing the view code and the answer you are getting when making the call to the api 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 do not need to have a method to query the api to obtain the products, you send the array to the component and you are ready (it would have to see the view)

Example in blade view:

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

2 - In case you are not sending the list of products to view, you should make the call to the api with your absolute url. Check out this answer
You could also define a variable url in the component and pass the url from the view and then use the method to obtain 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('/'}}"/>