0

I am using Laravel 5.8 + Vue.js in my project. Trying to get a single data from a controller but nothing is displaying. I added the 12345 in the component to check if the component is working, 12345 is showing well.

controller

  public function getSingleData($idx)
    {
      $paymentData = PaymentData::where('idx', $idx)->first();

      return view('paydetail')->with('paymentData', $paymentData);
    }

router

Route::view('/paylist', 'paylist')->name('paylist.view');
Route::get('/paylist/data', 'PaymentController@getPaymentData')->name('paylist');
Route::get('/paydetail/{idx}', 'PaymentController@getSingleData')->name('paydetail');

blade

@extends('layouts.default')

@section('content')

<div class="container">

    <paydetail :idx="{{ $paymentData->idx }}"></paydetail>

app.js

Vue.component('paydetail', require('./components/Paydetail.vue').default);

Paydetail.vue

<template>

<div>
  <h2>12345</h2>
  <div v-for="val in paymentData">
   <h2>{{ val.app_name }} </h2>
  </div>
</div>

</template>
<script>
import axios from 'axios'
export default {
  props: [ 'idx' ],
  data() {
      return {
          paymentData: [{}],
      }
  },
  created() {
    this.paymentData = this.getPayDetailData();
    console.log(this.idx);
    console.log("here");
  },
  methods: {
    getPayDetailData() {
      axios({
        method: 'GET',
        url: '/paydetail/'+ this.idx
      }).then(
          response => {
            console.log(response)
            return response
          },
          error => {
            console.log(error)
          }
      )
    },
  },
}
</script>

The result of console.log(response) is weird. It shows the whole html document which I don't understand at all. It shows like this.

{data: "<!DOCTYPE html>↵<html>↵    <head>↵        <meta ch…>↵<!-- For Datatable -->↵↵↵    </body>↵</html>↵", status: 200, statusText: "OK", headers: {…}, config: {…}, …}

What did I wrong here?

Jiwon
  • 366
  • 2
  • 17
  • 1
    Try returning the payment detail as json response instead a view – porloscerros Ψ Oct 16 '19 at 03:36
  • @porloscerrosΨ Could you guide more specific? – Jiwon Oct 16 '19 at 04:24
  • yes, sure. In your function you are returning a view `return view('paydetail')->with('paymentData', $paymentData);` thats why you get "the whole html document" result in your axios call. Replace the return by `return response()->json(['data' => $paymentData]);` to return a json response. Then look in the console.log if it's the data you want – porloscerros Ψ Oct 16 '19 at 04:30
  • @porloscerrosΨ Thank you for the explanation. But then, how can I display the ``paydetail.blade.php`` with the data? – Jiwon Oct 16 '19 at 04:39
  • in which blade is your component from where do you do axios call? I assumed that you had already loaded the blade view and with axios you just want to get the data to fill it – porloscerros Ψ Oct 16 '19 at 04:44
  • @porloscerrosΨ My vue component is in ``paydetail.blade.php`` and in the component, I want to get the data to fill. (Originally, it had written just laravel blade, but I'm trying to use vue.js in my project. That's why I'm so lost here.) – Jiwon Oct 16 '19 at 04:47
  • then you doesn't need the axios call, you can pass the whole object to the component as prop `` an in your component youa can receive it `props: [ 'paymentData' ],` and render `

    {{ paymentData.some_property }}

    `     – porloscerros Ψ Oct 16 '19 at 04:58
  • @porloscerrosΨ Okay, I see. But I tried as you wrote but it occurs error like this. ``[Vue warn]: Error in render: "TypeError: Cannot read property 'app_name' of undefined"`` – Jiwon Oct 16 '19 at 05:07
  • are you using Vue DevTools? if so, look if the `paymentData` prop is taken the value, o try to render the whole object `{{ paymentData }}`. Also check if the php variable `$paymentData` is not empty. Note generally you shouldn't use `v-for` for a single object – porloscerros Ψ Oct 16 '19 at 05:19
  • @porloscerrosΨ Thank you for your kindness. My Vue dev tools shows that ``props`` payment data is undefined but ``attrs`` shows the data correctly. and I checked the ``$paymentData``is not empty. Also, I dropped the v-for now. – Jiwon Oct 16 '19 at 05:30
  • but you have the prop and attr with same name `paymentData`? please, drop for now the attr, leave just this ` ` – porloscerros Ψ Oct 16 '19 at 05:36
  • @porloscerrosΨ I don't have anything for attr. I don't even know what it means. And I edited my code as you wrote but the result is the same. OTZ – Jiwon Oct 16 '19 at 05:41
  • try this in blade: ``. and in your component ` ` – porloscerros Ψ Oct 16 '19 at 05:53
  • @porloscerrosΨ Now the error message is like this. ``[Vue warn]: props must be strings when using array syntax.`` and ``[Vue warn]: Property or method "paymentData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.`` – Jiwon Oct 16 '19 at 05:56
  • take a look at this https://stackoverflow.com/questions/41520258/how-to-pass-a-php-variable-to-vue-component-instance-in-laravel-blade – porloscerros Ψ Oct 16 '19 at 06:24
  • @porloscerrosΨ Okay, I figured out. Thank you for your help. :) – Jiwon Oct 16 '19 at 07:57

0 Answers0