Question

我在vuejs中有一个v-for循环，它在每次迭代时显示一个组件。这是一个自动完成组件，可在用户键入输入框时搜索和显示产品名称。

我在每个组件上都有一个@change="setProduct"属性，可以在我的父组件中正确调用我的setProduct方法。

但我怎么知道更新了哪个组件？传递给setProduct方法的所有内容都是发出的产品的详细信息，但我不知道哪个组件发出了事件来知道要更新的行。

以下是一些相关代码：这是在父组件

中

<template>
    <div class="row" v-for="line, i in invoice.InvoiceLines">
        <div class="col-xs-5">
            <auto-complete :list="productList" :value="line.Product.name"  @change="setProduct"></auto-complete>
        </div>
        ...
    </div>
</template>
<script>
export default {
    data() {
        return {
            invoice:{},
            productList:[]
        },
    }
    methods:{
        setProduct(product){
           //product has the details of the new product that was selected. But I don't know which invoice line it is referring to. 
        },
    }
}
</script>

组件响应用户点击下拉列表中的选项，然后发出$ emit（'change'，product）;

组件不了解父组件，因此它不知道它引用哪个发票行。我可以将索引传递给子组件，然后将其传回去，但这似乎是vue的反模式。

也许我有更简单的方法来解决这个问题？

感谢您的帮助。

Answer 1

由于您正在使用v-for，因此您实际上可以检索index中的invoice.InvoiceLines项，并且可以将您想要的内容传递到setProduct：

<template>
    <div class="row" v-for="(line, i) in invoice.InvoiceLines">
        <div class="col-xs-5">
            <auto-complete 
                :list="productList" 
                :value="line.Product.name"  
                @change="setProduct(line, i, $event)"></auto-complete>
        </div>
        ...
    </div>
</template>

然后在JavaScript中：

methods: {
    setProduct(product, index, event){
       // product - the 'line' responsible in invoice.InvoiceLines
       // index - the index of line in invoice.InvoiceLines
       // event - the event object
    },
}

for循环中的Javascript vuejs组件

1 个答案: