时间戳

首页 > 解决方案 > 在 Vuetify 中，如何创建一个动态列表，其中包含可单击的复选框以选择它们？

javascript - 在 Vuetify 中，如何创建一个动态列表，其中包含可单击的复选框以选择它们？

问题描述

我正在尝试创建一个动态生成的列表（使用来自 API 的数据），然后使列表项可单击以选择这些项。

问题是在这个版本中，复选框可以正常工作，但是无法单击行来检查它们。

模板：

<div id="app">
  <v-app>
    <v-list dark>
      <v-list-tile v-for="(color) in colors" :key="color.hex" @click="">
        <v-list-tile-action>
          <v-checkbox v-model="selected" multiple :value="color" />
        </v-list-tile-action>
        <v-list-tile-content @click="">
          <v-list-tile-title>{{ color.label }}</v-list-tile-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
    <p>Selected items:</p>
    <pre>{{ selected }}</pre>
  </v-app>
</div>

JavaScript：

new Vue({
  el: "#app",
  data: () => ({
    selected: [],
    colors: [
      { hex: "#f00", label: "Red" },
      { hex: "#0f0", label: "Green" },
      { hex: "#00f", label: "Blue" }
    ]
  })
});

Codepen 玩弄它：https ://codepen.io/anon/pen/vvqeLz

与给定的示例相比，我没有可以预先创建的固定变量来将复选框标记为选中，并且我需要一个数组中的数据（就像现在正确发生的那样）稍后处理它。请注意，该示例已简化为最基本的最小值。（不包括道具等）

有没有人对如何使列表项可点击以正确检查框有一个天才的想法？

标签： javascriptvue.jsvuetify.js

解决方案

这是我的尝试，请参阅Codepen 示例

我所做的是创建一个方法来切换数组中颜色的添加和删除。然后我为行本身添加了点击功能@click.capture.stop="toggleColor(color)"。

该.capture.stop部分检查用户是否首先单击了选择框，如果是，则停止该方法再次触发。否则，一旦您单击选择框，选择框和行都会切换值，从而相互抵消

methods: {
  toggleColor (color) {
    if (this.selected.includes(color)) {
      // Removing the color
      this.selected.splice(this.selected.indexOf(color), 1);
    } else {
      // Adding the color
      this.selected.push(color);
    }
  }
}

推荐阅读