Why Can't I See My GrandTotal In My View?

Question

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

I want to display GrandTotal on my view table, but i don't know what i'm doing wrong.

Where i'm displaying GrandTotal:

<tr v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
  <td>{{ formatPrice(ctInvoice.ct_invoice_grand_total) }}</td>
</tr>

My VueJs data():

data() {
    return {
      ctInvoices: {},
      customers: null,
      form: new Form({
        id: "",
        customer_id: "",
        ct_invoice_no: "",
        ct_invoice_date: "",
        ct_invoice_fares_total: 0,
        ct_invoice_taxes_grand_total: 0,
        ct_invoice_grand_total: 0,

        ctInvoiceItems: [{
          id: "",
          ct_invoice_id: "",
          ct_passenger_name: "",
          ct_fares: 0,
          ct_total_tax_breakup: 0,
          ct_sub_total: 0
        }]
      })
    };

Format Amount with this method():

formatPrice(value) {
  let val = (value / 1).toFixed().replace(".", ".");
  return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //75.674,00
},

Image For Better Understanding:

One item output from ctInvoices array

ctInvoices:Array[20] 0:Object created_at:"2018-10-27 15:13:06" ct_Invoice_date:"2018-10-31" ct_Invoice_fares_total:"600.00" ct_Invoice_grand_total:"1000.00" ct_Invoice_grand_total_words:null ct_Invoice_taxes_grand_total:"400.00" ct_Invoice_terms:null ct_invoice_items:Array1 ct_invoice_no:"111-222-333" customer:Object customer_id:3 id:22 updated_at:"2018-10-27 15:13:06"

I don't know i just want to display my value in a money format, so i raise question and a guy gave me `formatMoney` `method()`. — Partab Saifuddin Zakir, Oct 28 '18 at 15:45
@BoussadjraBrahim Here it is, https://stackoverflow.com/questions/43208012/how-do-i-format-currencies-in-a-vue-component — Partab Saifuddin Zakir, Oct 28 '18 at 15:58
in your case you're doing `let val = (value / 1).toFixed().replace(".", ".");` but in the given question there's `let val = (value / 1).toFixed().replace(".", ",");` — Boussadjra Brahim, Oct 28 '18 at 16:01
yeah because i want to display my value like this `40,000` not like this `40.000` thats my i did this : `let val = (value / 1).toFixed().replace(".", ".");` — Partab Saifuddin Zakir, Oct 28 '18 at 16:03
look good at your code, you're replacing the dot by another dot — Boussadjra Brahim, Oct 28 '18 at 16:06
Let me tell you one this i have to `ticketInvoices` just like `ctInvoices`, all data is same and `formatMoney` method is working perfectly there, i can see my value is Money format, I'm doing same in `ctInvoices`, i don't know why it's not working in `ctInvoices`. — Partab Saifuddin Zakir, Oct 28 '18 at 16:09
@BoussadjraBrahim can you help me out with this issue, i'm not able to resolve this since many days: https://stackoverflow.com/questions/52998040/why-cant-i-see-my-invoice-items-when-i-edit-my-invoice — Partab Saifuddin Zakir, Oct 28 '18 at 16:12
before going to the old question, i invite you to look at your code `.replace(".", ".");` you don't replace comma by dot , you're replacing dot by another dot — Boussadjra Brahim, Oct 28 '18 at 16:17
Now i'm doing this: `val = (value / 1).toFixed().replace(".", ",");` and the result is same @BoussadjraBrahim — Partab Saifuddin Zakir, Oct 28 '18 at 16:23
ok good, did you try to console `val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")`? — Boussadjra Brahim, Oct 28 '18 at 16:26
You mean this: `formatPrice(value) { let val = (value / 1).toFixed().replace(".", ","); return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); //75.674,00 val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); },` — Partab Saifuddin Zakir, Oct 28 '18 at 16:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/182674/discussion-between-boussadjra-brahim-and-saif-zakir). — Boussadjra Brahim, Oct 28 '18 at 16:34

score 1 · Accepted Answer · answered Oct 28 '18 at 17:38

You're making a typo, you have a property called ct_Invoice_grand_total in your ctInvoice object with uppercase I and you're calling it with lowercase i, so you should put :

     <tr v-for="ctInvoice in ctInvoices" :key="ctInvoice.id">
       <td>{{ formatPrice(ctInvoice.ct_Invoice_grand_total) }}</td>
     </tr>

score 0 · Answer 2 · answered Oct 28 '18 at 15:04

What error does your console show?

In your data you are specifing ctInvoices as an object, shouldn't this be an array with ctInvoice objects in it?

Does every ctInvoice in the ctInvoices contain a ct_invoice_grand_total property?

Instead of using a function to format the price, you could use an filter with toLocaleString.

Vue.filter('formatNumber', value => {
    let number = parseFloat(value);
    let options = { minimumFractionDigits: 2, style: 'currency', currency: 'EUR' };

    return number.toLocaleString("nl-NL", options);
});

Why Can't I See My GrandTotal In My View?

2 Answers2