InvoiceLine.vue

<template>
    <tr>
        <td>
            <select name="invoice_lines[1][product_id]" class="form-control _select-product_id" v-on:change="fillFields" v-model="product_id">
                <option value="0">@lang('mamorunl::invoices.invoice_lines.messages.select_product_id')</option>
                <option v-for="(id, name) in products" :value="id">{{ name }}</option>
            </select>
            <input type="hidden" name="invoice_lines[1][product_code]" value="" v-model="product_code">
        </td>
        <td>
            <input type="text" class="form-control" name="invoice_lines[1][description]" value="" v-model="description">
        </td>
        <td>
            <input type="text" class="form-control" name="invoice_lines[1][price]" value="" v-model="price" v-on:keyup="updateLineTotal">
        </td>
        <td>
            <input type="text" class="form-control" name="invoice_lines[1][quantity]" value="" v-model="quantity" v-on:keyup="updateLineTotal">
        </td>
        <td>
            <select name="invoice_lines[1][vat_rate]" class="form-control" v-model="vat_rate">
                <option value="0">0%</option>
                <option value="9">9%</option>
                <option value="21">21%</option>
            </select>
        </td>
        <td>
            <p class="form-control-static">
                &euro; {{ line_total }}
            </p>
        </td>
    </tr>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "InvoiceLine",

        props: {
            product_code: Number,
            description: String,
            price: {
                type: Number,
                default: 0
            },
            quantity: {
                type: Number,
                default: 0
            },
            vat_rate: {
                type: Number,
                default: 21
            },
            product_id: {
                type: Number,
                default: 0
            }
        },

        data() {
            return {
                products: {},
                line_total: 0
            }
        },

        created() {
            let self = this;
            axios.get('/admin/ajax/products').then(function(response) {
                self.products = response.data;
            });

            self.updateLineTotal();
        },


        methods: {
            fillFields: function(event) {
                let product_id = event.target.selectedOptions[0].value;
                let application = this;

                axios.get('/admin/ajax/products/' + product_id).then(function(response) {
                    application.description = response.data.name;
                    application.product_code = response.data.code;
                    application.price = response.data.price;
                });
            },

            updateLineTotal: function(event) {
                this.line_total = this.price * this.quantity;
            }
        }
    }
</script>

<style scoped>

</style>