首页 文章

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

提问于
浏览 次
0

我试图弄清楚这是否是在v-for Vuejs中对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 .

谁能指出我正确的方向？我是否会以最有效的方式进行此操作？

javascript laravel vue.js

2 回答

  • 0

    Vue正在使用当前的js代码 . 看起来这个问题与Laravel的刀片引擎和部分问题有关 . 清除视图缓存似乎已修复该问题 .

    回复于
  • 0

    如果你从组件的根元素中取出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>
    回复于

相关问题