link2603 link2604 link2605 link2606 link2607 link2608 link2609 link2610 link2611 link2612 link2613 link2614 link2615 link2616 link2617 link2618 link2619 link2620 link2621 link2622 link2623 link2624 link2625 link2626 link2627 link2628 link2629 link2630 link2631 link2632 link2633 link2634 link2635 link2636 link2637 link2638 link2639 link2640 link2641 link2642 link2643 link2644 link2645 link2646 link2647 link2648 link2649 link2650 link2651 link2652 link2653 link2654 link2655 link2656 link2657 link2658 link2659 link2660 link2661 link2662 link2663 link2664 link2665 link2666 link2667 link2668 link2669 link2670 link2671 link2672 link2673 link2674 link2675 link2676 link2677 link2678 link2679 link2680 link2681 link2682 link2683 link2684 link2685 link2686 link2687 link2688 link2689 link2690 link2691 link2692 link2693 link2694 link2695 link2696 link2697 link2698 link2699 link2700 link2701 link2702 link2703 link2704 link2705 link2706 link2707 link2708 link2709 link2710 link2711 link2712 link2713 link2714 link2715 link2716 link2717 link2718 link2719 link2720 link2721 link2722 link2723 link2724 link2725 link2726 link2727 link2728 link2729 link2730 link2731 link2732 link2733 link2734 link2735 link2736 link2737 link2738 link2739

[Vue.js] Alternating v-for DOM elements on same level

when trying to have two alternating loops after each other on the same level. If I wrap it in a parent element and loop thru it brakes the styles.

Here is an example of what when trying to do:

<div v-for=”category in items” class=”cat-name”>{ category.name }</div>
<div v-for=”category in items” class=”cat-meta”>{ category.metaData }</div>

Wanted Result:

<div class=”cat-name”>name1</div>
<div class=”cat-meta”>metadata1</div>
<div class=”cat-name”>name2</div>
<div class=”cat-meta”>metadata2</div>
<div class=”cat-name”>name3</div>
<div class=”cat-meta”>metadata3</div>

and so on…

I really hope that this is possible since it completely breaks the styles when I tried:

<div v-for=”category in items”>
<div class=”cat-name”>{ category.name }</div>
<div class=”cat-meta”>{ category.metaData }</div>
</div>

Really appreciate any help and input.
Thanks, -J

Solution :

You could wrap both the elements in a template tag.
Unlike a basic tag, this one will not be rendered in the DOM.

<template v-for=”category in items”>
<div class=”cat-name”>{ category.name }</div>
<div class=”cat-meta”>{ category.metaData }</div>
</template>