0

我正在使用v-for自定义组件并将项目作为道具传递。但问题是循环中的每个组件实例都采用相同的 item 属性。例如，在第一个循环中，组件字段具有文本“abc”，那么第二个循环组件也将具有相同的“abc”文本。如果我更改第二个中的文本，它也会在第一个组件中更改。有没有办法让每个循环的道具都独一无二？

例如，这是调用内部组件的代码：

<template v-for="(businesscase, index) in businessCase.fields">
    <custom-case-freetext-field @field-changed="updateFields"
                             :key="index"
                             @field-removed="removeFields"
                             :fields="businessCase.fields"
                             :index="index">
    </custom-case-freetext-field>
</template>

在这个组件里面我有一个基本的形式

<sw-field :label="$tc('rma.modules.case.freetext.nameLabel')"
  :placeholder="$tc('rma.modules.case.freetext.nameLabel')"
  required
  v-model="fields[index].name">
</sw-field>

<sw-single-select
    labelValue="label"
    valueProperty="label"
    :options="fieldTypes"
    :label="$tc('rma.modules.case.freetext.fieldType')"
    :placeholder="$tc('rma.modules.case.freetext.fieldType')"
    v-model="fields[index].type"
    @input="changeType"
    required>
</sw-single-select>

如果我不这样做，:value则v-model一旦元素失去焦点，输入的值就会消失。

如果我使用v-model，数据会保留在那里，但是两个（或循环中存在的多个）组件实例之间都有数据绑定，因此它违背了为多个组件设置循环的目的。如屏幕截图所示，我正在输入第二个组件，但它也更改了第一个组件的文本。

数据绑定问题

在上面的示例中，我将整个数组作为道具发送，但我也尝试使用单个field元素而不是fields

4

1 回答 1

0

您没有在组件中使用 businesscase 变量。而且由于每个组件总是在上限范围属性上工作，所以它们都会改变相同的。使用内部范围属性。如果您在反应性方面遇到问题，因为您尝试直接修改 props，请使用将键和更改后的值发送到 upperscope 组件的事件。

于 2020-09-22T04:47:40.453 回答