时间戳

首页 > 解决方案 > 参数化 v-for 指令

vue.js - 参数化 v-for 指令

问题描述

我v-for用来生成一组 vuetify v-timeline-item，其中的元素根据存储在自定义对象中的值进行自定义：

<v-timeline-item
   v-for="target in targetsList"
     :key="target.uid"
     :color="typesConfig[target.format].color"
     :icon="target.icon"
     large
     fill-dot
>

我想typesConfig根据 的值从对象中选择一种颜色target.format。

typesConfig是一个如下所示的计算属性：

const typesConfig = {
    doc: {
       color: 'red lighten-2',
       icon: 'mdi-star',
    }, etc...

我无法弄清楚如何从对象中获取颜色值并将其分配给:color. 我尝试了各种各样的事情，包括没有运气的字符串文字:(

我希望上述内容很清楚，您的帮助将不胜感激。

谢谢你。

标签： vue.jsvuetify.jsvue-directives

解决方案

你说typesConfig 是一个看起来像这样的计算属性：......但这不是计算属性的样子。

看起来您已经在 Vue 对象之外定义了一个常量。

我使用数据属性模拟了您的组件，typesConfig并且您拥有的模板可以完美运行。

如果您从其他东西进行计算，例如targetsList，您只需要一个计算属性，但您打算从这些对象中删除颜色和图标。

因此，您可能只需要一个从您的 const 初始化的数据属性，例如

const typesConfig = {
  doc: {
    color: 'red lighten-2',
    icon: 'mdi-star',
  },
}

export default {
  data: () => ({
    targetsList: [ 
      { uid: 'ABC', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
      { uid: 'def', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' },
      { uid: 'ghi', subject: 'S1', format: 'doc', notes: "some notes", date: 'Feb 10, 2020' }
    ],
    typesConfig: typesConfig
  })
};

推荐阅读