Vue-storefront: eslint vue/no-use-v-if-with-v-for rule not respected

[lsimone]

Current behavior

Currently in Product page v-if and v-for are used on the same element 4 times.

It should be avoided and eslint shows warnings.

Here the exact places:

• one
• two
• three
• four

Expected behavior

either v-if should be used in a dom element that wraps the one having v-for, or the v-for should loop on a already filtered list (could be done in a computed prop), and v-if removed

Steps to reproduce the issue

just run npm run dev

Repository

https://github.com/DivanteLtd/vue-storefront/blob/master/src/themes/default/pages/Product.vue

[pkarw]

@filrak can you please take a look at this one?

[pkarw]

@przspa may I ask you to take care of this one please?

[pspaczek]

@pkarw sure :)

[pspaczek]

@pkarw but now @patzick working on #3217 it's not the same issues? In this case we should use computed property in this v-if.

[pkarw]

@przspa it's not - Patryk won't be changing the UI part

[patzick]

QA - after deploy there should be tested available options on product page - changing filters there. There should be visible only available options.

thanks @przspa

[alinadivante]

@przspa there are visible also not available options on PDP