javascript - In Vuetify, how can I make a dynamically list with checkboxes clickable to select them? - Stack Overflow

admin管理员组

文章数量:1279112

I'm trying to create a dynamically generated list (with data from an API), then make the list items clickable to select these items.

The problem is that in this version, the checkboxes work properly, however the rows cannot be clicked to check them.

Template:

<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 to play around with it:

Compared to the given example, there's no fixed variable I can pre-create to mark a checkbox as selected, and I need the data in one array (as is correctly happening now) to process this later on. Note that the example is simplified to the bare-bone minimum. (excluding props and so forth)

Does anyone have a genius idea on how to make the list items clickable to check the boxes properly?

I'm trying to create a dynamically generated list (with data from an API), then make the list items clickable to select these items.

The problem is that in this version, the checkboxes work properly, however the rows cannot be clicked to check them.

Template:

<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 to play around with it: https://codepen.io/anon/pen/vvqeLz

Compared to the given example, there's no fixed variable I can pre-create to mark a checkbox as selected, and I need the data in one array (as is correctly happening now) to process this later on. Note that the example is simplified to the bare-bone minimum. (excluding props and so forth)

Does anyone have a genius idea on how to make the list items clickable to check the boxes properly?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow asked Jan 18, 2019 at 12:44 ZeroThe2ndZeroThe2nd 1,66211 gold badge1212 silver badges1515 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

Here is my attempt at it, see the Codepen example

What I did was create a method which toggles the adding and removing of a color in the array. Then I added the click functionality for the row itself with @click.capture.stop="toggleColor(color)".

The .capture.stop part checks whether a user clicked on a select box first, and if so it stops the method from firing again. Else once you click a select box both the select box and the row toggle the value, thus cancelling each other out

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);
    }
  }
}

Codepen Link

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

Brings you every selected colors as an Array.

This solution gives you 2 advantages over your one. You can predefine what should be checked before it even gets clicked once, and you can also easily implement a manipulation of the clicked value of the Array outside of the checkbox itself.

Codepen Link

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

@Badgy, mutating of original data - is bad. Method is better.

---

UPD: one more solution

本文标签：