Access vue components created via v-for from an array of objects

Question

I have the following template and I want to call a method of the dynamically created components in the v-for statement.

For example I want to call on each row the row.getSubtotal() method. I do not know how to do it as this.rows returns the original array and not the array of components.

 <template>
    <div>
        <table class="table table-bordered">
            <thead>
                <th  v-for="c in columns" v-bind:class="[c.className ? c.className : '']" :key="c.code">{{c.label}}</th>
            </thead>
            <tbody>
            <row v-for="(row, index) in rows"
                 :index="index+1"
                 :init-data="row"
                 :columns="columns"
                 :key="row.hash"
                 :hash="row.hash"
                 v-on:remove="removeRow(index)"></row>
            </tbody>
        </table>
        <div class="d-flex">
            <table>
                <tr>
                    <td>Unique SKUs:</td>
                    <td>{{rows.length}}</td>
                    <td>Total units:</td>
                    <td>{{totalUnits}}</td>
                </tr>
            </table>
            <span class="flex-fill"></span>
            <button class="btn" @click="newRow">Nueva línea</button>
        </div>
    </div>
</template>

The <row> element is a Vue component that it's created via the rows property that contains an array of objects with each rows property. For example:

...
import Row from './Row'

export default {
    name: "OrderTable",
    components: {Row},
    data: () => ({
        hashes: [],
        rows: [
           {hash: '_yug7', sku: '85945', name: 'Coconut butter', price: 20},
           {hash: '_g484h', sku: '85745', name: 'Coconut oil', price: 15},
           {hash: '_yug7', sku: '85945', name: 'Cramberry juice', price: 5},
        ],
        fixedColumns: [
            {code: 'index', label: '#'},
            {code: 'sku', label: 'SKU'},
            {code: 'name', label: 'Product name', className: 'text-left align-middle'},
            {code: 'quantity', label: 'Units'},
            {code: 'price', label: 'Price', className: 'text-right align-middle'}
        ]
    }),
    computed: {
        totalUnits: function () {
            for(let x in this.rows) {
                // HERE I WANT TO CALL A METHOD IN THE ROW COMPONENT
                // For example this.rows[x].getSubtotal()
            }
        }
    },
...

tony19 · Accepted Answer · 2022-07-15 21:04:08Z

Dynamically create a ref attribute on each component and call it afterwards:

<template>
    <div>
        <table class="table table-bordered">
            <thead>
                <th  v-for="c in columns" v-bind:class="[c.className ? c.className : '']" :key="c.code">{{c.label}}</th>
            </thead>
            <tbody>
            
            <!-- Add the ref attribute to each row -->
            <row v-for="(row, index) in rows"
                 :ref="`myRow${index}`"
                 :index="index+1"
                 :init-data="row"
                 :columns="columns"
                 :key="row.hash"
                 :hash="row.hash"
                 v-on:remove="removeRow(index)"></row>

            </tbody>
        </table>
        <div class="d-flex">
            <table>
                <tr>
                    <td>Unique SKUs:</td>
                    <td>{{rows.length}}</td>
                    <td>Total units:</td>
                    <td>{{totalUnits}}</td>
                </tr>
            </table>
            <span class="flex-fill"></span>
            <button class="btn" @click="newRow">Nueva línea</button>
        </div>
    </div>
</template>

To call a method on the component, do this:

computed: {
        totalUnits: function () {
            for(let (x, index) in this.rows) {
                let row = this.$refs[`myRow${index}`]
                // You now have an instance of the component
                let subtotal = row.getSubtotal()
            }
        }
    },

More information for the $refs attribute here: what's the real purpose of 'ref' attribute?

tony19 · Accepted Answer · 2022-07-16 04:23:15Z

0

Consider v-for and v-model combination to export all the data you need from your row children. Your <row /> will need to implement the v-model interface so look it up.

Of course you could use actions $emit(),$on(), etc. and make rows signal the parent component their states everytime they need to.

Hope this points you to the right direction.

edited Jul 16, 2022 at 4:23

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 23, 2018 at 14:59

Z. Zlatev

4,8101 gold badge35 silver badges39 bronze badges

2 Comments

Aquaguy Over a year ago

Thanks for your answer, but no, it's not solving my problem. Even if I listen to an event emitted by the children I would get the data (quantity, discount, price...) of that item alone and not all the items in the table/cart. I need to SUM all the quantities and all the subtotals

Z. Zlatev Over a year ago

Every child will emit its own state, yes. But the parent has to store them in some kind of collection (array). Then you will be able to process this collection using Array.map(), Array.reduce() etc. to get your totals.

Collectives™ on Stack Overflow

Access vue components created via v-for from an array of objects

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related