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>

Demo

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

1 个答案: