CODEWITHSUNDEEP
htmlfor-loopforeachpugmixins
Thanooshan
Thanooshan

Reputation: 666

How to include mixins in a loop and fetch data in pug

I have following mixins which contains svg files.

mixin gift_icon
   svg ..

mixin leat_icon
   svg ..

mixin pyramid_icon
   svg ..

In my index.pug file. I'm trying fetch above mixins via loop.

    .grid-container
        - 
            grid_items = [
                {icon: +leaf_icon, title: "Title 01"},
                {icon: +gift_icon, title: "Title 02"},
            ]

        each item in grid_items
            .grid
                figure
                    item.icon
                a(href="")= item.title

But the mixin part is not fetching correctly. It just creating a class.

output

Any help would be much appreciated.

Upvotes: 1

Views: 760

Answers (1)

tom
tom

Reputation: 10559

You can't store the mixin result in a javascript variable. A workaround could be to store the mixins in an javascript object.

- 
  var mixins = {
    gift_icon: '<span>svg</span>',
    leat_icon: '<span>svg</span>',
    pyramid_icon: '<span>svg</span>',
  }

.grid-container
  - 
    grid_items = [
      {icon: mixins.gift_icon, title: "Title 01"},
      {icon: mixins.leat_icon, title: "Title 02"},
      {icon: mixins.pyramid_icon, title: "Title 03"},
    ]

each item in grid_items
  .grid
    figure !{item.icon}
  a(href="")= item.title

By the way: to get the variables output as escaped html use figure !{item.icon}.

Upvotes: 1

Related Questions