Question

我正在试图弄清楚这是否是使用Vuejs在v-for中对HTML进行条件呈现的最佳方式。我在“卡片”上显示了几种不同类型的信息，我从DynamoDB实例中以json的形式返回。每种类型的卡都应该有自己的模板。我现在的代码是：

<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>

每个@include都会在html中提取特定类型的卡片呈现，并使用vue的模板引擎来插入属性。在初始页面加载时，这非常有效。但如果我对原始数组进行任何类型的过滤 - html始终保留在页面上。事实上，在更新之后，它会在我运行过滤器时多次复制页面上的html。

有人能指出我正确的方向吗？我能以最有效的方式解决这个问题吗？

Answer 1

如果你从组件的根元素中取出for循环，

似乎有效：

<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正在使用当前的js代码。看起来这个问题与Laravel的刀片引擎和部分问题有关。清除视图缓存似乎解决了这个问题。

Laravel中的vuejs和条件模板渲染问题

2 个答案: