CODEWITHSUNDEEP
vuejs2vue-componentshopwareshopware6
Huzaifa Mustafa
Huzaifa Mustafa

Reputation: 322

Using inner component in a loop in Shopware 6 does not persist the values uniquely for each looped component

I am using a v-for over a custom component and passing the item as a prop. But the issue is that each component instance in the loop takes the same item prop. For e.g in the 1st loop a component field has text "abc", then the second looped component also will have the same "abc" text. If I change the text in the 2nd one, it changes in the 1st component too. Is there a way to make the prop unique for each loop ?

For e.g this is the code which calls the inner component:

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

and inside this component I have a basic form

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

If I do :value instead of v-model, the entered value disappears as soon as the element loses focus.

If I use v-model, the data stays there, but then both (or as many are there in the loop) component instances, have data binding between them, so it defeats the purpose of having a loop for multiple components. As seen in the screenshot, I am typing in the 2nd component, but it changes the text for the first one too.

Data Binding Problem

In the above example I am sending the whole array as prop, but I have also tried with individual field element instead of fields

Upvotes: 0

Views: 310

Answers (1)

LastSgt
LastSgt

Reputation: 417

Your are not using the businesscase variable inside your components. And since every component always works on the upper scope property, they will all change the same. Use the innerscope property. If you have problems with reactivity, because you try to mutate props directly work with events emitting the key and the changed value to the upperscope component.

Upvotes: 0

Related Questions