List Item w/ Link Adventure

ListItemWithLinkAdventure.md

List Item w/ Link Adventure

While working on InnocuousAchilles/steamworks-scouting's app rewrite with Quasar, I needed to display a list of matches. I wanted to break them down by Event >> MatchNumber >> Team.

For the list of Events, I first came up the following with based off of the demo for Dialogs with the @click slapped on in there.

<div class="item item-link">
    <div class="item-content has-secondary">
        <div @click="$router.push('/scout/view/event/' + eventName)">{{ eventName }}</div>
    </div>
    <i class="item-secondary">keyboard_arrow_right</i>
</div>

but after reading more documentation, I thought I'd go with what Quasar docs had for Lists with links

<router-link tag="div" class="item item-link" :to="'/scout/view/event/' + eventName">
    <div class="item-content has-secondary">
        <div>{{ eventName }}</div>
    </div>
    <i class="item-secondary">keyboard_arrow_right</i>
</router-link>

But did I really want this? It seemed like they were both pretty readable so I didn't know which one to go with.

Finally I ended up finding out about the Vue component wrapper for the List Item CSS leading me to

<q-list-item
    :item="{
        label: eventName,
        secondIcon: 'keyboard_arrow_right'
    }"
    link
    @click.native="$router.push('/scout/view/event/' + eventName)"
></q-list-item>

Is it better? Well it's all in one tag so it must be.