Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue 3 <ais-dynamic-widgets> does not work with child v-for <ais-panel>s #6207

Open
1 task done
jhillegas1 opened this issue May 20, 2024 · 2 comments
Open
1 task done
Labels
triage Issues to be categorized by the team

Comments

@jhillegas1
Copy link

🐛 Current behavior

If an <ais-dynamic-widgets> component is used with an array of children <ais-panel v-for="item in someArray">, the components do not render.

This worked as expected in Vue2, but does not work in Vue3

🔍 Steps to reproduce

Given the following example array

const sampleData = [{
  attribute: 'specifications.power-source',
  label: 'Power Source',
},
{
  attribute: 'specifications.blowing-force',
  label: 'Blowing Force',
}]

The following sample template will not render in Vue3, however, it will render in Vue2.

<!--[ais-instant-search boiler plate wrapper removed for brevity]-->
<ais-dynamic-widgets>
  <ais-panel v-for="(item,index) in sampleData" :key="index">
    <ais-refinement-list  :attribute="item.attribute" />
  </ais-panel>
</ais-dynamic-widgets>

If you remove the v-for from consideration and directly access the array index, the dynamic components will render as expected.

<ais-dynamic-widgets>
  <ais-panel>
    <ais-refinement-list  :attribute="sampleData[0].attribute" />
  </ais-panel>
  <ais-panel>
    <ais-refinement-list  :attribute="sampleData[1].attribute" />
  </ais-panel>
</ais-dynamic-widgets>

Live reproduction

None

💭 Expected behavior

ais-dynamic-widgets should behave the same way as it did in Vue 2, with children rendering properly with the use of v-for

Package version

vue-instantsearch 4.16.1

Operating system

No response

Browser

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct
@jhillegas1 jhillegas1 added the triage Issues to be categorized by the team label May 20, 2024
@Haroenv
Copy link
Contributor

Haroenv commented May 21, 2024

I wonder if this is related to the traversing of the children. Do you mind adding an (unused) prop :attribute to the ais-panel directly? If that is the problem, it likely means that the entire looping context is seen as a single child

@jhillegas1
Copy link
Author

The following made no difference and did not work.

<ais-dynamic-widgets>
  <ais-panel v-for="(item,index) in sampleData" :key="index" :attribute="item.attribute">
    <ais-refinement-list  :attribute="item.attribute" />
  </ais-panel>
</ais-dynamic-widgets>

I also suspect it is related to the iteration of the children but have not been able to confirm yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
triage Issues to be categorized by the team
Projects
None yet
Development

No branches or pull requests

2 participants