参数化 v-for 指令

Question

我正在使用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
>

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

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

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

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

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

谢谢。

Answer 1

你说 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
  })
};