[SOLVED] How to group arrays for pull-to-refresh component

Questions
1

I’m trying to figure out how to group array items, but no luck.
I’m modifying the the pull to refresh component page from kitchen sink. Basically, I want “Painting 01” to be in the same media-list-row as “Artist 01”, also with specific “picUrl” and “itemHref”. Please help - thanks.
Below is my html code:

    <div class="page-content ptr-content" data-ptr-mousewheel="true" @ptr:refresh="loadMore">
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list">
        <ul>
          {{#each items}}
          <li class="item-content">
            <div class="item-media"><a href="/{{itemHref}}/" class="link" taget="_blank"><img src="{{picUrl}}" width="44"/></a></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">{{artwork}}</div>
              </div>
              <div class="item-subtitle">{{artist}}</div>
            </div>
          </li>
          {{/each}}
        </ul>
      </div>
    </div>

below is my script without the proper grouping…

<script>
  return {
    data: function () {
      return {
        items: [
          {
            picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-1.jpg',
            artwork: 'Mona Lisa',
            artist: 'Leonardo da Vinci',
			itemHref: 'about'
          },
          {
            picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
            artwork: 'Starry Night',
            artist: 'Vincent van Gogh',
			itemHref: 'about2'
          },
        ],
			artworks: ['Painting 01', 'Painting 02', 'Painting 03', 'Painting 04'],
			artists: ['Artist 01', 'Artist 02', 'Artist 03', 'Artist 04']
      }
    },
    methods: {
      loadMore: function (e, done) {
        var self = this;
        var $ = self.$$;

        setTimeout(function () {
          // Add new item
          self.items.push({
            picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-' + Math.round(Math.random() * 10) + '.jpg',
            itemHref: 'about' + Math.round(Math.random() * 10),			
            artwork: self.artworks[Math.floor(Math.random() * self.artworks.length)],
            artist: self.artists[Math.floor(Math.random() * self.artists.length)],
          })

          // Update state to rerender
          self.$setState({
            items: self.items,
          });

          // Done
          done();
        }, 1000);
      }
    }
  }
</script>
2 
var randomIndex = Math.floor(Math.random() * self.artworks.length);
self.items.push({
  picUrl: 'https://cdn.framework7.io/placeholder/abstract-88x88-' + Math.round(Math.random() * 10) + '.jpg',
  itemHref: 'about' + Math.round(Math.random() * 10),			
  artwork: self.artworks[randomIndex],
  artist: self.artists[randomIndex],
})
3

@nolimits4web, thanks. It works!