How To Display My Invoice Data In Invoice Template









up vote
0
down vote

favorite












I'm using Laravel 5.7 & VueJs 2.5.* ...



I have invoices table, i need to display specific invoice in a new component, so user can see whatever invoice he wants or print that invoice.



I don't know how to do that, i'm just playing around, if you could help me out, i'll be very grateful to you.



<router-link> to the component





<router-link to="/ct-invoice-view" @click="openInvoice(ctInvoice)">
<i class="fas fa-eye fa-lg text-blue"></i>
</router-link>



Displaying Customer information here like this:





<div class="col-sm-4 invoice-col">
<address v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
<strong>Customer Info</strong><br>
Name: <span> ctInvoice.customer.customer_name </span>



Invoice view component data() & method





data() 
return
ctInvoices: ,
customers: null
;
,
methods: {
openInvoice(ctInvoice)
axios
.get("api/ct-invoice/show/" + this.viewInvoice)
.then((
data
) => (this.ctInvoices = data.data));
,



Image for Better Understanding
enter image description here










share|improve this question























  • I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
    – Sujil Maharjan
    Nov 9 at 18:30










  • i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
    – Saif Zakir
    Nov 9 at 19:37















up vote
0
down vote

favorite












I'm using Laravel 5.7 & VueJs 2.5.* ...



I have invoices table, i need to display specific invoice in a new component, so user can see whatever invoice he wants or print that invoice.



I don't know how to do that, i'm just playing around, if you could help me out, i'll be very grateful to you.



<router-link> to the component





<router-link to="/ct-invoice-view" @click="openInvoice(ctInvoice)">
<i class="fas fa-eye fa-lg text-blue"></i>
</router-link>



Displaying Customer information here like this:





<div class="col-sm-4 invoice-col">
<address v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
<strong>Customer Info</strong><br>
Name: <span> ctInvoice.customer.customer_name </span>



Invoice view component data() & method





data() 
return
ctInvoices: ,
customers: null
;
,
methods: {
openInvoice(ctInvoice)
axios
.get("api/ct-invoice/show/" + this.viewInvoice)
.then((
data
) => (this.ctInvoices = data.data));
,



Image for Better Understanding
enter image description here










share|improve this question























  • I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
    – Sujil Maharjan
    Nov 9 at 18:30










  • i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
    – Saif Zakir
    Nov 9 at 19:37













up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm using Laravel 5.7 & VueJs 2.5.* ...



I have invoices table, i need to display specific invoice in a new component, so user can see whatever invoice he wants or print that invoice.



I don't know how to do that, i'm just playing around, if you could help me out, i'll be very grateful to you.



<router-link> to the component





<router-link to="/ct-invoice-view" @click="openInvoice(ctInvoice)">
<i class="fas fa-eye fa-lg text-blue"></i>
</router-link>



Displaying Customer information here like this:





<div class="col-sm-4 invoice-col">
<address v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
<strong>Customer Info</strong><br>
Name: <span> ctInvoice.customer.customer_name </span>



Invoice view component data() & method





data() 
return
ctInvoices: ,
customers: null
;
,
methods: {
openInvoice(ctInvoice)
axios
.get("api/ct-invoice/show/" + this.viewInvoice)
.then((
data
) => (this.ctInvoices = data.data));
,



Image for Better Understanding
enter image description here










share|improve this question















I'm using Laravel 5.7 & VueJs 2.5.* ...



I have invoices table, i need to display specific invoice in a new component, so user can see whatever invoice he wants or print that invoice.



I don't know how to do that, i'm just playing around, if you could help me out, i'll be very grateful to you.



<router-link> to the component





<router-link to="/ct-invoice-view" @click="openInvoice(ctInvoice)">
<i class="fas fa-eye fa-lg text-blue"></i>
</router-link>



Displaying Customer information here like this:





<div class="col-sm-4 invoice-col">
<address v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
<strong>Customer Info</strong><br>
Name: <span> ctInvoice.customer.customer_name </span>



Invoice view component data() & method





data() 
return
ctInvoices: ,
customers: null
;
,
methods: {
openInvoice(ctInvoice)
axios
.get("api/ct-invoice/show/" + this.viewInvoice)
.then((
data
) => (this.ctInvoices = data.data));
,



Image for Better Understanding
enter image description here







javascript html laravel vue.js vuejs2






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 9 at 19:36

























asked Nov 9 at 15:57









Saif Zakir

6310




6310











  • I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
    – Sujil Maharjan
    Nov 9 at 18:30










  • i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
    – Saif Zakir
    Nov 9 at 19:37

















  • I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
    – Sujil Maharjan
    Nov 9 at 18:30










  • i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
    – Saif Zakir
    Nov 9 at 19:37
















I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
– Sujil Maharjan
Nov 9 at 18:30




I am unsure of the ask here. Can you create a simple jsFiddle with sample data and post it?
– Sujil Maharjan
Nov 9 at 18:30












i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
– Saif Zakir
Nov 9 at 19:37





i don't know about Fiddie, i just need to view my invoice, like when i click on view button, that specific invoice detail should display.... @SujilMaharjan
– Saif Zakir
Nov 9 at 19:37













2 Answers
2






active

oldest

votes

















up vote
1
down vote













You need to look at Dynamic Route matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes



Then you need to use axios.get in invoice views beforeMount function where this.$route.params.id will hold the invoice ID you want to load if the link is applied like so:



<router-link :to="`/ct-invoice-view/$ctInvoice.id`">
<i class="fas fa-eye fa-lg text-blue"></i>
</router-link>


Alternatively...



I suggest not navigating away from the list, it can be irritating for users having filtered the list then returning to it to look at more invoices and having to filter again unless the filter options and current results are sticky



There are a number of ways of doing this and they are lengthy to example, Typically I would make proper use of a modal and the invoice view load the data on display but to get you started a basic in page solution to experiment with, then try adapting in a reusable modal component later:



<button @click="showInvoice = ctInvoice.id">
<i class="fas fa-eye fa-lg text-blue"></i>
</button>



data() 
return
loading: false,
invoice: ,
customers: null
;
,
computed:
showInvoice:
get: function()
return this.invoice.hasOwnProperty('id');
,
set: function(value)

if(value === false)
this.invoice = ;
return;


// could check a cache first and push the cached item into this.invoice else load it:

this.loading = true;

axios.get("api/ct-invoice/show/" + value).then(response =>
// you could push the invoice into a cache
this.invoice = response.data;

).cache(error =>
// handle error
).finally(() =>
this.loading = false;
);






In view-invoice component have a close button with bind @click="$emit('close')"
Check this article for how $emit works: https://vuejs.org/v2/guide/components-custom-events.html



<div v-if="loading" class="loading-overlay"></div>
<view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
<table v-else>....</table>


Hide the table when displaying the invoice, experiment with using v-show instead of v-if upon loosing table content state.



Inside your invoice view, property called invoice will contain the invoice data.
Check this article for how to use props: https://vuejs.org/v2/guide/components-props.html




Hint: The @close listens to the $emit('close')




Could also make use of when switching between table and invoice view.
https://vuejs.org/v2/guide/transitions.html






share|improve this answer





























    up vote
    0
    down vote













    @MarcNewton



    I did something like this, it's working for me, can u just review it for me:



    <router-link> to the Invoice View component





    <router-link v-bind:to="name: 'ctInvoiceView', params: id: ctInvoice.id">
    <i class="fas fa-eye fa-lg text-blue"></i>
    </router-link>




    Getting Data of Specific Invoice ID Like This:





    created: function() 
    axios
    .get("/api/ct-invoice/" + this.$route.params.id)
    .then((
    data
    ) =>
    console.log(data);
    this.form = new Form(data);
    )
    .catch(error =>
    console.log(error.response);
    );
    ,







    share|improve this answer
















    • 1




      Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
      – Marc Newton
      Nov 14 at 13:17







    • 1




      When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
      – Marc Newton
      Nov 14 at 13:26











    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













     

    draft saved


    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229161%2fhow-to-display-my-invoice-data-in-invoice-template%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    1
    down vote













    You need to look at Dynamic Route matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes



    Then you need to use axios.get in invoice views beforeMount function where this.$route.params.id will hold the invoice ID you want to load if the link is applied like so:



    <router-link :to="`/ct-invoice-view/$ctInvoice.id`">
    <i class="fas fa-eye fa-lg text-blue"></i>
    </router-link>


    Alternatively...



    I suggest not navigating away from the list, it can be irritating for users having filtered the list then returning to it to look at more invoices and having to filter again unless the filter options and current results are sticky



    There are a number of ways of doing this and they are lengthy to example, Typically I would make proper use of a modal and the invoice view load the data on display but to get you started a basic in page solution to experiment with, then try adapting in a reusable modal component later:



    <button @click="showInvoice = ctInvoice.id">
    <i class="fas fa-eye fa-lg text-blue"></i>
    </button>



    data() 
    return
    loading: false,
    invoice: ,
    customers: null
    ;
    ,
    computed:
    showInvoice:
    get: function()
    return this.invoice.hasOwnProperty('id');
    ,
    set: function(value)

    if(value === false)
    this.invoice = ;
    return;


    // could check a cache first and push the cached item into this.invoice else load it:

    this.loading = true;

    axios.get("api/ct-invoice/show/" + value).then(response =>
    // you could push the invoice into a cache
    this.invoice = response.data;

    ).cache(error =>
    // handle error
    ).finally(() =>
    this.loading = false;
    );






    In view-invoice component have a close button with bind @click="$emit('close')"
    Check this article for how $emit works: https://vuejs.org/v2/guide/components-custom-events.html



    <div v-if="loading" class="loading-overlay"></div>
    <view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
    <table v-else>....</table>


    Hide the table when displaying the invoice, experiment with using v-show instead of v-if upon loosing table content state.



    Inside your invoice view, property called invoice will contain the invoice data.
    Check this article for how to use props: https://vuejs.org/v2/guide/components-props.html




    Hint: The @close listens to the $emit('close')




    Could also make use of when switching between table and invoice view.
    https://vuejs.org/v2/guide/transitions.html






    share|improve this answer


























      up vote
      1
      down vote













      You need to look at Dynamic Route matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes



      Then you need to use axios.get in invoice views beforeMount function where this.$route.params.id will hold the invoice ID you want to load if the link is applied like so:



      <router-link :to="`/ct-invoice-view/$ctInvoice.id`">
      <i class="fas fa-eye fa-lg text-blue"></i>
      </router-link>


      Alternatively...



      I suggest not navigating away from the list, it can be irritating for users having filtered the list then returning to it to look at more invoices and having to filter again unless the filter options and current results are sticky



      There are a number of ways of doing this and they are lengthy to example, Typically I would make proper use of a modal and the invoice view load the data on display but to get you started a basic in page solution to experiment with, then try adapting in a reusable modal component later:



      <button @click="showInvoice = ctInvoice.id">
      <i class="fas fa-eye fa-lg text-blue"></i>
      </button>



      data() 
      return
      loading: false,
      invoice: ,
      customers: null
      ;
      ,
      computed:
      showInvoice:
      get: function()
      return this.invoice.hasOwnProperty('id');
      ,
      set: function(value)

      if(value === false)
      this.invoice = ;
      return;


      // could check a cache first and push the cached item into this.invoice else load it:

      this.loading = true;

      axios.get("api/ct-invoice/show/" + value).then(response =>
      // you could push the invoice into a cache
      this.invoice = response.data;

      ).cache(error =>
      // handle error
      ).finally(() =>
      this.loading = false;
      );






      In view-invoice component have a close button with bind @click="$emit('close')"
      Check this article for how $emit works: https://vuejs.org/v2/guide/components-custom-events.html



      <div v-if="loading" class="loading-overlay"></div>
      <view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
      <table v-else>....</table>


      Hide the table when displaying the invoice, experiment with using v-show instead of v-if upon loosing table content state.



      Inside your invoice view, property called invoice will contain the invoice data.
      Check this article for how to use props: https://vuejs.org/v2/guide/components-props.html




      Hint: The @close listens to the $emit('close')




      Could also make use of when switching between table and invoice view.
      https://vuejs.org/v2/guide/transitions.html






      share|improve this answer
























        up vote
        1
        down vote










        up vote
        1
        down vote









        You need to look at Dynamic Route matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes



        Then you need to use axios.get in invoice views beforeMount function where this.$route.params.id will hold the invoice ID you want to load if the link is applied like so:



        <router-link :to="`/ct-invoice-view/$ctInvoice.id`">
        <i class="fas fa-eye fa-lg text-blue"></i>
        </router-link>


        Alternatively...



        I suggest not navigating away from the list, it can be irritating for users having filtered the list then returning to it to look at more invoices and having to filter again unless the filter options and current results are sticky



        There are a number of ways of doing this and they are lengthy to example, Typically I would make proper use of a modal and the invoice view load the data on display but to get you started a basic in page solution to experiment with, then try adapting in a reusable modal component later:



        <button @click="showInvoice = ctInvoice.id">
        <i class="fas fa-eye fa-lg text-blue"></i>
        </button>



        data() 
        return
        loading: false,
        invoice: ,
        customers: null
        ;
        ,
        computed:
        showInvoice:
        get: function()
        return this.invoice.hasOwnProperty('id');
        ,
        set: function(value)

        if(value === false)
        this.invoice = ;
        return;


        // could check a cache first and push the cached item into this.invoice else load it:

        this.loading = true;

        axios.get("api/ct-invoice/show/" + value).then(response =>
        // you could push the invoice into a cache
        this.invoice = response.data;

        ).cache(error =>
        // handle error
        ).finally(() =>
        this.loading = false;
        );






        In view-invoice component have a close button with bind @click="$emit('close')"
        Check this article for how $emit works: https://vuejs.org/v2/guide/components-custom-events.html



        <div v-if="loading" class="loading-overlay"></div>
        <view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
        <table v-else>....</table>


        Hide the table when displaying the invoice, experiment with using v-show instead of v-if upon loosing table content state.



        Inside your invoice view, property called invoice will contain the invoice data.
        Check this article for how to use props: https://vuejs.org/v2/guide/components-props.html




        Hint: The @close listens to the $emit('close')




        Could also make use of when switching between table and invoice view.
        https://vuejs.org/v2/guide/transitions.html






        share|improve this answer














        You need to look at Dynamic Route matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes



        Then you need to use axios.get in invoice views beforeMount function where this.$route.params.id will hold the invoice ID you want to load if the link is applied like so:



        <router-link :to="`/ct-invoice-view/$ctInvoice.id`">
        <i class="fas fa-eye fa-lg text-blue"></i>
        </router-link>


        Alternatively...



        I suggest not navigating away from the list, it can be irritating for users having filtered the list then returning to it to look at more invoices and having to filter again unless the filter options and current results are sticky



        There are a number of ways of doing this and they are lengthy to example, Typically I would make proper use of a modal and the invoice view load the data on display but to get you started a basic in page solution to experiment with, then try adapting in a reusable modal component later:



        <button @click="showInvoice = ctInvoice.id">
        <i class="fas fa-eye fa-lg text-blue"></i>
        </button>



        data() 
        return
        loading: false,
        invoice: ,
        customers: null
        ;
        ,
        computed:
        showInvoice:
        get: function()
        return this.invoice.hasOwnProperty('id');
        ,
        set: function(value)

        if(value === false)
        this.invoice = ;
        return;


        // could check a cache first and push the cached item into this.invoice else load it:

        this.loading = true;

        axios.get("api/ct-invoice/show/" + value).then(response =>
        // you could push the invoice into a cache
        this.invoice = response.data;

        ).cache(error =>
        // handle error
        ).finally(() =>
        this.loading = false;
        );






        In view-invoice component have a close button with bind @click="$emit('close')"
        Check this article for how $emit works: https://vuejs.org/v2/guide/components-custom-events.html



        <div v-if="loading" class="loading-overlay"></div>
        <view-invoice v-if="showInvoice" :invoice="invoice" @close="showInvoice = false" />
        <table v-else>....</table>


        Hide the table when displaying the invoice, experiment with using v-show instead of v-if upon loosing table content state.



        Inside your invoice view, property called invoice will contain the invoice data.
        Check this article for how to use props: https://vuejs.org/v2/guide/components-props.html




        Hint: The @close listens to the $emit('close')




        Could also make use of when switching between table and invoice view.
        https://vuejs.org/v2/guide/transitions.html







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 14 at 13:21

























        answered Nov 10 at 16:01









        Marc Newton

        1,7051319




        1,7051319






















            up vote
            0
            down vote













            @MarcNewton



            I did something like this, it's working for me, can u just review it for me:



            <router-link> to the Invoice View component





            <router-link v-bind:to="name: 'ctInvoiceView', params: id: ctInvoice.id">
            <i class="fas fa-eye fa-lg text-blue"></i>
            </router-link>




            Getting Data of Specific Invoice ID Like This:





            created: function() 
            axios
            .get("/api/ct-invoice/" + this.$route.params.id)
            .then((
            data
            ) =>
            console.log(data);
            this.form = new Form(data);
            )
            .catch(error =>
            console.log(error.response);
            );
            ,







            share|improve this answer
















            • 1




              Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
              – Marc Newton
              Nov 14 at 13:17







            • 1




              When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
              – Marc Newton
              Nov 14 at 13:26















            up vote
            0
            down vote













            @MarcNewton



            I did something like this, it's working for me, can u just review it for me:



            <router-link> to the Invoice View component





            <router-link v-bind:to="name: 'ctInvoiceView', params: id: ctInvoice.id">
            <i class="fas fa-eye fa-lg text-blue"></i>
            </router-link>




            Getting Data of Specific Invoice ID Like This:





            created: function() 
            axios
            .get("/api/ct-invoice/" + this.$route.params.id)
            .then((
            data
            ) =>
            console.log(data);
            this.form = new Form(data);
            )
            .catch(error =>
            console.log(error.response);
            );
            ,







            share|improve this answer
















            • 1




              Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
              – Marc Newton
              Nov 14 at 13:17







            • 1




              When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
              – Marc Newton
              Nov 14 at 13:26













            up vote
            0
            down vote










            up vote
            0
            down vote









            @MarcNewton



            I did something like this, it's working for me, can u just review it for me:



            <router-link> to the Invoice View component





            <router-link v-bind:to="name: 'ctInvoiceView', params: id: ctInvoice.id">
            <i class="fas fa-eye fa-lg text-blue"></i>
            </router-link>




            Getting Data of Specific Invoice ID Like This:





            created: function() 
            axios
            .get("/api/ct-invoice/" + this.$route.params.id)
            .then((
            data
            ) =>
            console.log(data);
            this.form = new Form(data);
            )
            .catch(error =>
            console.log(error.response);
            );
            ,







            share|improve this answer












            @MarcNewton



            I did something like this, it's working for me, can u just review it for me:



            <router-link> to the Invoice View component





            <router-link v-bind:to="name: 'ctInvoiceView', params: id: ctInvoice.id">
            <i class="fas fa-eye fa-lg text-blue"></i>
            </router-link>




            Getting Data of Specific Invoice ID Like This:





            created: function() 
            axios
            .get("/api/ct-invoice/" + this.$route.params.id)
            .then((
            data
            ) =>
            console.log(data);
            this.form = new Form(data);
            )
            .catch(error =>
            console.log(error.response);
            );
            ,








            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 14 at 12:29









            Saif Zakir

            6310




            6310







            • 1




              Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
              – Marc Newton
              Nov 14 at 13:17







            • 1




              When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
              – Marc Newton
              Nov 14 at 13:26













            • 1




              Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
              – Marc Newton
              Nov 14 at 13:17







            • 1




              When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
              – Marc Newton
              Nov 14 at 13:26








            1




            1




            Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
            – Marc Newton
            Nov 14 at 13:17





            Since you are working with Laravel, You do not need to use From data objects. JSON is native to Laravel. For example in InvoiceController@show($id) you can do: return Invoice::findOrFail($id). In axios .then(response => console.log(response.data) ).
            – Marc Newton
            Nov 14 at 13:17





            1




            1




            When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
            – Marc Newton
            Nov 14 at 13:26





            When posting axios.post(URI, this.form).... is sufficient, the native raw javascript object will be posted as JSON by default and Laravel will handle that out of the box, Laravels $request->input will have parsed the posted object as if it was a Form object that was posted, this will make your code a little more streamlined. No need to JSON encode or decode anything...
            – Marc Newton
            Nov 14 at 13:26


















             

            draft saved


            draft discarded















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53229161%2fhow-to-display-my-invoice-data-in-invoice-template%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Darth Vader #20

            How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

            Ondo