Question

我正在使用Vuetify扩展面板，并且正在使用数组extension Dictionary where Key == Couple<Int, Int>, Value == Any循环获取标头，并使用另一个名为Headers的数组循环获取所需的文本。我怎样才能使elements数组中的文本仅显示在它们各自的面板下。所以基本上对于面板，动物，只有猫狗等等出现。

这里是示例codepen

的链接

elements

new Vue({
  el: "#app",
  data() {
    return {
      headers: [{
          text: 'Animals'
        },
        {
          text: 'Food'
        },
        {
          text: 'Colors'
        }
      ],
      elements: [{
          text: 'Cat',
          panel: 'Animals'
        },
        {
          text: 'Dog',
          panel: 'Animals'
        },
        {
          text: 'Chocolates',
          panel: 'Food'
        },
        {
          text: 'Pizza',
          panel: 'Food'
        },
        {
          text: 'Red',
          panel: 'Colors'
        },
        {
          text: 'Yellow',
          panel: 'Colors'
        }
      ]
    }
  }
})

因此，基本上动物成分应包含猫和狗，食物应包含巧克力和比萨，颜色应包含红色和黄色。谢谢：）

Answer 1

一种解决方案，不需要更改数据格式，而无需像这样对v-if进行硬编码

<v-card v-if="element.panel == 'Animals'">

您要检查元素面板是否属于当前标题

<v-card v-if="element.panel == header.text">

您还可以更改数据格式（未经测试，可能是下面的错误）

new Vue({
    el: "#app",
    data() {
        return {
            headers: [{
                    text: 'Animals',
                    elements: [{
                            text: 'Cat'
                        }, {
                            text: 'Dog'
                        }
                    ]
                }, {
                    text: 'Food',
                    elements: [{
                            text: 'Chocolates'
                        }, {
                            text: 'Pizza'
                        }
                    ]
                }, {
                    text: 'Colors',
                    elements: [{
                            text: 'Red'
                        }, {
                            text: 'Yellow'
                        }
                    ]
                }
            ]
        }
    }
});

然后标记为

<div id="app">
  <v-app id="inspire">
    <v-expansion-panel>
      <v-expansion-panel-content v-for="(header,i) in headers" :key="i">
        <template v-slot:header>
          <div>{{header.text}}</div>
        </template>
        <v-card v-for="element in header.elements" :key="element">
          <v-card-text >
            {{element.text}}
          </v-card-text>
        </v-card>
      </v-expansion-panel-content>
    </v-expansion-panel>
  </v-app>
</div>

Answer 2

您还可以使用返回函数的计算属性（尽管我更喜欢@JaromandaX的第一个想法，但更简单）。

computed: {
  elementsByPanel() {
    return (panel) => {
      return this.elements.filter(el => el.panel === panel);
  }
}

像这样使用它

    <template v-for="element in elementsByPanel(header.text)" >
      <v-card :key="element.text">
        <v-card-text >
          {{element.text}}
        </v-card-text>
      </v-card>
    </template>

如果过滤条件更复杂，则可能更可取，因为与模板中的表达式相比，计算的属性更易于测试。

用v-for循环Vuetify扩展面板吗？

2 个答案: