Issue with vuejs and conditional template rendering in Laravel

Question

I'm trying to figure out if this is best way to go about conditional rendering of HTML in a v-for with Vuejs. I have several different types of information displayed on "cards" that I'm getting back as json from a DynamoDB instance. Each type of card should have it's own template. The code I have now is:

<ul>
    <template v-for="card in cards | onlyMatching">
        <li transition="expand" v-if="card.Data.event_type === 'user_comment'">
            @include('feed.card_templates.user_comment')
        </li>

        <li transition="expand" v-if="card.Data.event_type === 'user_position'">
            @include('feed.card_templates.user_position')
        </li>
    </template>
</ul>

Each of those @include's pulls in the html for that specific type of card rendering and uses vue's templating engine to plug in the properties. On initial page load this works really well. But if I do any type of filtering on the original array - the html always stays on the page. In fact after updating it will duplicate the html on the page as many times as I run the filter.

Can anyone point me in the right direction? Am I going about this the most efficient way?

Answer 1

seems to work if you take the for loop off the root element of the component:

<ul>
    <template>
       <div v-for="card in cards | onlyMatching">
          <li transition="expand" v-if="card.Data.event_type === 'user_comment'">
               @include('feed.card_templates.user_comment')
          </li>
          <li transition="expand" v-if="card.Data.event_type === 'user_position'">
              @include('feed.card_templates.user_position')
          </li>
       </div>
    </template>
</ul>

Answer 2

Vue was working as it was supposed to with the current js code. Looks like this issue was with Laravel's blade engine and partials. Clearing the view cache seems to have fixed the issue.