如何在发票模板中显示我的发票数据

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

Answer 1

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://v2.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://v2.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://v2.vuejs.org/v2/guide/transitions.html

Answer 2

@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);
    });
},