这是我第一次在StackOverflow上发帖！

我目前正在建立一个社交媒体网络应用程序。我刚从WebApp的通知页面开始。我的问题是不同的通知有不同的模板。因此，虽然一些通知可能包括图像，但其他通知不包括。我已经成功地通过循环以id作为键的JSON数组来显示提要，但我认为我不能用通知窗格来实现这一点。每个通知都有其单独的ID，因此循环访问它们不是问题。我的主要问题是每个通知都有自己的type属性，我希望根据类型显示不同的div模板，同时使用ID.

为了澄清，我将类星体cli用于vue.js。

我将为下面的循环附加代码，以了解某些上下文。

如有任何帮助，不胜感激。我试图搜索此问题，但没有找到任何结果，尽管这可能是我不知道如何正确搜索的问题。

<q-card
       class = "no-padding"
       style = "height: 150px;"
       v-for = "event in joinedEvents"
       :key = "event.id" flat> 

基本上，如果通知类型为1，我希望能够显示图像；如果通知类型为2，我希望能够显示按钮。

提前感谢！

顺晟科技：

可以利用vue js的动态组件特性，定义通知模板，然后根据标识符动态设置通知模板，使用该方法可以对任意多个模板使用单个模型

模板结构如下所示

• 组件
  • 通知
    • 模板A
    • Tempalte b
    • 模板C
    • ----等

在vue中使用

每当收到通知时，只需设置模板和数据，然后使其可见。

下面是一个工作示例:

https://codesandbox.io/s/vue-dynamic-template-example-gwt9d