从对象数组中访问通过 v-for 创建的 vue 组件

Question

我有以下模板，我想在v-for语句中调用动态创建的组件的方法。

例如，我想在每一行上调用row.getSubtotal() 方法。我不知道该怎么做，因为this.rows 返回的是原始数组而不是组件数组。

 <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>

<row> 元素是一个 Vue 组件，它是通过 rows 属性创建的，其中包含具有每个 rows 属性的对象数组。例如：

...
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()
            }
        }
    },
...

Answer 1

在每个组件上动态创建ref属性，然后调用：

<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>

要调用组件上的方法，请执行以下操作：

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()
            }
        }
    },

$refs 属性的更多信息在这里：what's the real purpose of 'ref' attribute?

Answer 2

考虑将v-for 和v-model 组合以从行子级导出您需要的所有数据。你的<row /> 需要实现 v-model 接口，所以look it up。

当然，您可以使用操作 $emit(),$on(), etc. 并让行在每次需要时向父组件发出其状态信号。

希望这会为您指明正确的方向。