[Vuejs]-How to have parent data be updated by child component with multiple values

by

1đź‘Ť

âś…

Here’s a list of problems in your attempt that would prevent it from displaying anything at all i.e.

  1. quantity: initialQuantity, – surely you meant quantity: this.initialQuantity, … etc for all the other such data
  2. missing } for computed total
  3. your line-item template is invalid – you have multiple “root” elements

And then there’s some minor issues:

  1. you want the @change handler for the select, not @input, if your code ran, you’d see the difference,
  2. Similarly you want @change for input otherwise you’ll be making fetch requests to change the items every keystroke, probably not what you’d want

So, despite all that, I’ve produced some working code that does all you need – mainly for my own “learning” though, to be fair :p

// ******** some dummy data and functions to emulate fetches
const products = [
    { id: 333, text: "Product A", unitPrice: 10},
    { id: 555, text: "Product B", unitPrice: 11},
    { id: 777, text: "Product C", unitPrice: 12},
];

let dummy = [
    {id: 1, quantity:2, product: 333, total: 20},
    {id: 2, quantity:3, product: 777, total: 36},
];

const getLineItems = () => new Promise(resolve => setTimeout(resolve, 1000, JSON.stringify({lineitems: dummy})));
const update = items => {
    return new Promise(resolve => setTimeout(() => {
        dummy = JSON.parse(items);
        dummy.forEach(item => 
            item.total = parseFloat(
                (
                    item.quantity * 
                    (products.find(p => p.id === item.product) || {unitPrice: 0}).unitPrice *
                    (item.quantity > 4 ? 0.9 : 1.0)
                ).toFixed(2)
            )
        );
        let res = JSON.stringify({lineitems: dummy});
        resolve(res);
    }, 50));
}

//********* lineItem component
Vue.component('line-item', {
    props: ["value"],
    data () {
        return {
            productOptions: [
                { id: 333, text: "Product A"},
                { id: 555, text: "Product B"},
                { id: 777, text: "Product C"},
            ]
        }
    },
    methods: {
        doupdate() {
            this.$emit('update-item', this.value.product);
        }
    },
    template: `
        <p>
            <input v-model="value.quantity" type="number" @change="doupdate()"/>

            <select v-model="value.product" @change="doupdate()">
                <option v-for="option in productOptions" v-bind:value="option.id"> {{ option.text }} </option>
            </select>

            Line Item Price: {{ '$' + value.total.toFixed(2) }}
        </p>
    `
})

//********* Order/App
const orderPK = '';
var order = new Vue({
    el: '#app',
    data: {
        orderPK: orderPK,
        lineitems: []
    },
    mounted() {
        // initial load
        this.fetchLineItems();
    },
    computed: {
        carttotal() {
            return this.lineitems.reduce((a, {total}) => a + total, 0)
        }
    },
    methods: {
        updateOrder(productCode) {
            // only call update if the updated item has a product code
            if (productCode) {
                // real code would be
                // fetch(`domain.com/orders/${this.orderPK}/calculate`, this.lineitems).then(resp => resp.json())
                // dummy code is
                update(JSON.stringify(this.lineitems)).then(data => JSON.parse(data))
                
                .then(data => this.lineitems = data.lineitems);
            }
        },
        fetchLineItems() {

            // real code would be
            //fetch(`domain.com/api/orders/${this.orderPK}`).then(resp => resp.json())
            // dummy code is
            getLineItems().then(data => JSON.parse(data))
            
            .then(data => this.lineitems = data.lineitems);
            
        },
        addLine() {
            this.lineitems.push({
                id: Math.max([this.lineitems.map(({id}) => id)]) + 1, 
                quantity:0, 
                product: 0, 
                total: 0
            });
        }
    },
    template: `
        <div>
            <h2 id="total">Order: {{lineitems.length}} items, total: {{'$'+carttotal.toFixed(2)}}</h2>

            <line-item v-for="(item, index) in lineitems"
                :key="item.id"
                v-model="lineitems[index]"
                @update-item="updateOrder"
            />
            <button @click="addLine()">
                Add item
            </button>
        </div>
    `
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
        <div id="app">
        </div>

note: there may be some inefficient code in there, please don’t judge too harshly, I’ve only been using vuejs for a week

👤Bravo

Leave a comment