Quasar: Router link

[xereda]

Router link

Hello,

When you enable a "router link" tag, the list becomes unconfigured.

What is the correct way to add link in a simple list?

See the attached illustration.

Thank you.

<template>
  <div>
    <div slot="header" class="toolbar primary">
      <quasar-search v-model="search" class="primary"></quasar-search>
    </div>
    <div class="layout-padding">
      <div class="list item-delimiter" >
        <div class="item" v-for="esp in listaComFiltro">
          <router-link to="/porMedico">
            <div class="item-content">
              {{ esp.nome }}
            </div>
            <div class="item-secondary stamp">
                <span class="label bg-grey-4 text-grey-8 ">{{ esp.total }}</span>
            </div>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

unconfigured:

After comment router-link lines (disable links):

[rstoenescu]

<router-link> has a tag property which you can use. Your template should look like this:

<template>
  <div>
    <div slot="header" class="toolbar primary">
      <quasar-search v-model="search" class="primary"></quasar-search>
    </div>
    <div class="layout-padding">
      <div class="list item-delimiter">
        <router-link tag="div" class="item item-link" v-for="esp in listaComFiltro" to="/porMedico">
          <div class="item-content">
            {{ esp.nome }}
          </div>
          <div class="item-secondary stamp">
              <span class="label bg-grey-4 text-grey-8 ">{{ esp.total }}</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

Notice <router-link tag="div" class="item item-link" v-for="esp in listaComFiltro" to="/porMedico"> instead of <div class="item" ...> <router-link ...> <div class="item-content">....

[xereda]

Very good!!
That is lack of knowledge in the VueJS on my part. Am sorry!

[rstoenescu]

Glad I can help!

[RoelRoel]

Accupuncture is proven quackery and should not be promoted!