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 example

我所做的是创建一个方法来切换数组中颜色的添加和删除。然后，我用@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);
    }
  }
}

Answer 2

Codepen Link

  computed: {
    selected: function() {
      return this.colors.filter(color => color.selected)
    }
  }

为您提供每种选择的颜色作为数组。

此解决方案为您提供2个优势。您可以预定义什至在单击一次之前应该检查的内容，还可以轻松地在复选框本身之外对Array的clicked值进行操作。

Answer 3

Codepen Link

    processColorClick(color) {
      let idx = this.selected.indexOf(color);
      if (idx === -1) {
        this.selected.push(color);
      }
      else {
        this.selected.splice(idx, 1);
      }
    }

@Badgy，原始数据的变异-很糟糕。方法更好。

UPD：one more solution

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

3 个答案: