时间戳

首页 > 解决方案 > 在 vuetify 2.x 中显示突出显示的列表项

vue.js - 在 vuetify 2.x 中显示突出显示的列表项

问题描述

我正在用 vuetify 2.x 编写我的第一个应用程序。该应用程序正在显示一个项目列表，这些项目是具有文本 ( item.t) 字符串字段和选中 ( item.c) 布尔字段的对象。

我想以当前主题颜色显示选中的项目，并以相反的主题颜色（突出显示）显示未选中的项目。因此，它取决于item.c字段值的值。

我假设更改列表项的它们会反转其内容的颜色。黑色 <-> 白色。

我怎么能那样做？

这是我的列表组件：

<template>
  <v-list dense>
    <template v-for="(item, index) in items">
      <v-list-item :key="item.r">
        <v-list-item-content class="font-weight-medium">
          <v-layout>
            <v-row align="center">
              <v-col cols="2">
                <v-row no-gutters justify="end">
                  {{ item.n }}
                </v-row>
              </v-col>
              <v-col cols="10" class="px-0">
                <v-row no-gutters>{{ item.t }}</v-row>
              </v-col>
            </v-row>
          </v-layout>
        </v-list-item-content>
      </v-list-item>
      <v-divider
        v-if="index < items.length - 1"
        :key="`divider-${index}`"
      ></v-divider>
    </template>
  </v-list>
</template>

<script>
export default {
  name: "itemList",
  computed: {
    items() {
      return this.$store.getters.currentListItems;
    },
  },
};
</script>

我尝试了很多事情都没有成功，但找不到如何做到这一点的例子。

编辑：由于项目只包含文本而没有图标，也许改变背景和文本颜色就足够了。主题的好处是它还可以反转图标。

标签： vue.jsvuetify.js

解决方案

您可以通过 v-menu 通过 v-select 或 v-combo-box 以不同的方式执行此操作，在这里您可以使用多个选项 https://vuetifyjs.com/en/components/combobox/#dense 但我认为您需要使用组合框，在这里您可以自由思考

推荐阅读