在Vuetify中，如何创建带有可单击复选框以选中它们的动态列表？

Question

我正在尝试创建一个动态生成的列表（带有来自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

与给定的示例相比，没有可以固定创建的固定变量来将复选框标记为选中状态，并且我需要一个数组中的数据（现在正在正确地进行处理），以便稍后进行处理。请注意，该示例已简化为最低限度。（不包括道具等）

有谁对如何使列表项可单击以正确选中复选框有天才的想法？

Answer 1

这是我的尝试，请参见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);
    }
  }
}