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属性创建的，该属性包含具有每个row属性的对象数组。例如：

...
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属性，然后再调用它：

3 sells is 420

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

networkVariable.node

此处的networkVariables.nodeEnter = networkVariables.node.enter(); networkVariables.nodeEnter.append("div");属性的更多信息：what's the real purpose of 'ref' attribute?

Answer 2

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

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

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

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

2 个答案: