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

Question

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

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

 <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 组件，它是通过行属性创建的，其中包含一个对象数组，每行属性。例如：

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

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

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

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

Answer 2

在每个组件上动态创建一个 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 属性的更多信息，请参见此处：

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

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

vue.js

vue-component

vuejs2

v-for