CODEWITHSUNDEEP
vue.jsvue-component
Big D
Big D

Reputation: 55

vue multiple tag 'template' in one single file component

I am work in company with big frontend team, and guys use multiple template tag in single file components. Before that I never see something like this, for me it bad practice. But head developers think that I am stuped, when I ask about that. Can some one please explain me, when I must use it and why? and if it possible please give link to vue documentation. And yes, we use vuetify.

example:

<template>
  <VContainer>
    <VRow>
      <VCol>
        <h2>
          {{ title }}
        </h2>
        <p>
          {{ subtitle }}
        </p>
      </VCol>
    </VRow>

    <Share />

    <template v-if="p.length > 0">
      <VRow>
        <VCol>
          {{ text }}
        </VCol>
      </VRow>

      <VDivider/>
    </template>

    <template v-for="(t, index) in ts">
      <VRow :key="index">
        <VCol v-if="t.p.length > 0">
          {{ text }}
        </VCol>
      </VRow>

      <VDivider
        v-if="index < t.length - 1"
        :key="`divider-${index}`"
        class="mx-3"
      />
    </template>

  </VContainer>
</template>

Upvotes: 0

Views: 1849

Answers (2)

ethan_you
ethan_you

Reputation: 246

I think it does't matter use multiple template, We should not use div wrapper the condition render Component, the div will insert to DOM. here is the official documemnt https://v2.vuejs.org/v2/guide/conditional.html#Conditional-Groups-with-v-if-on-lt-template-gt

Upvotes: 0

Daniel Beck
Daniel Beck

Reputation: 21514

The <template> used here is just a way to handle loops or conditionals without inserting extra nodes into the DOM.

You could put the v-if or v-for directly on the <VRow> instead of on a <template> that wraps it, but sometimes that's undesirable -- if there are already other conditions there that you want to keep separate, or if you want to wrap multiple nodes in the same condition, as in your example where you have both a <VRow> and a <VDivider> contained in a single <template>.

It's not bad practice and has no undesirable performance effect at all. Your head developers should be better able to communicate that to you rather than calling you 'stupid'.

Upvotes: 3

Related Questions