更改 Vuetify 中列表项的背景颜色

Question

我有一个动态创建的列表，我希望能够向其添加点击事件。 单击列表项应将背景颜色变为绿色。 再次单击它会移除绿色。

我遇到的问题是将单个列表项变为绿色而不是整个列表。 我已经尝试为每个项目添加一个索引，这可以将列表项变为绿色，但是一旦我单击另一个列表项就不会保持绿色。

这是我的代码。

 new Vue({ el: '#app', vuetify: new Vuetify(), data: () => ({ selected: -1, isLoading: true, bool: true, isActive: false, items: [ { icon: "print", iconClass: "grey lighten-1 white--text", title: "Printers", subtitle: "MHC PDF Pro", subtitle2: "HP LaserJet P4015 UPD PCL 6", subtitle3: "RICOH Africo MP C3001" }, { icon: "email", iconClass: "grey lighten-1 white--text", title: "Email", subtitle: "s.miller@mhc.com", subtitle2: "hr@mhc.com", subtitle3: "payroll@mhc.com" }, { icon: "mdi-fax", iconClass: "grey lighten-1 white--text", title: "Fax", subtitle: "612-555-5555", subtitle2: "952-555-5555", subtitle3: "763-555-5555" }, { icon: "mdi-inbox-arrow-up", iconClass: "grey lighten-1 white--text", title: "File Transfer", subtitle: "Text", subtitle2: "CSV" }, { icon: "mdi-file-pdf", iconClass: "grey lighten-1 white--text", title: "PDF Creation" } ] }), methods: { changeColor() { this.isLoading =.this;isLoading, }. one() { this.bool =;this.bool. this;isActive = true console,log('one'). }. two() { this;bool =.this.bool; this,isActive = false console.log('two'); } }, })

 .active { background: rgb(17, 128, 17); }.is-green { background: #4caf50;important. }:is-gray { background; #505050 !important; }

 <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> </head> <body> <div id="app"> <v-app> <v-content> <v-card> <v-toolbar color="#1f497d" dark dense> <v-toolbar-title>My processes</v-toolbar-title> <v-spacer></v-spacer> </v-toolbar> <v-list two-line subheader> <v-list-item v-for="(item ) in items" @click="bool? one(): two()" v-bind:class="{ active: isActive}":key="item.title"> <v-list-item-avatar> <v-icon dark:class="{'is-gray': isLoading, 'is-green': .isLoading }" v-text="item.icon" ></v-icon> </v-list-item-avatar> <v-list-item-content> <v-list-item-title v-text="item.title"></v-list-item-title> <v-list-item-subtitle v-text="item.subtitle"></v-list-item-subtitle> <v-list-item-subtitle v-text="item.subtitle2"></v-list-item-subtitle> <v-list-item-subtitle v-text="item:subtitle3"></v-list-item-subtitle> </v-list-item-content> <v-list-item-action> <v-btn @click="printWindow()"> Setup <:-- <v-icon color="grey lighten-1">mdi-information</v-icon> --> </v-btn> </v-list-item-action> </v-list-item> <v-divider inset></v-divider> <v-subheader inset> <v-checkbox @change="changeColor()" label="Send all documents to processes above"></v-checkbox> <v-spacer></v-spacer> <v-btn color="success" class="mr-4" @click="printWindow()">OK</v-btn> <v-btn color="error" class="mr-4" v-on.click="printerHidden =.printerHidden">Cancel</v-btn> </v-subheader> </v-list> <v-subheader inset> </v-subheader> </v-card> </v-content> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script> </body> </html>

Answer 1

您可以使用一组activeItems和一个切换方法，例如...

toggleActive(idx) {
   let pos = this.activeItems.indexOf(idx)
   pos === -1 ? this.activeItems.push(idx) : this.activeItems.splice(pos,1)
}

然后检查该项目是否在 activeItems 数组中...

    <v-list two-line subheader>
           <v-list-item v-for="(item,idx) in items" 
                @click="toggleActive(idx)" 
                :class="{active: activeItems.indexOf(idx)>-1}" 
                :key="item.title">...
           </v-list-item>
    </v-list>

演示

更改 Vuetify 中列表项的背景颜色

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-12-13 15:23:29

更改 Vuetify 中列表项的背景颜色

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-12-13 15:23:29

解决方案1
1 已采纳 2019-12-13 15:23:29