Ich versuche, eine dynamisch generierte Liste (mit Daten von einer API) zu erstellen und dann die Listenelemente anklickbar zu machen, um diese Elemente auszuwählen.

Das Problem ist, dass in dieser Version die Kontrollkästchen ordnungsgemäß funktionieren, die Zeilen jedoch nicht angeklickt werden können, um sie zu aktivieren.

Vorlage:

<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 zum Herumspielen: https://codepen.io/anon/pen/vvqeLz

Im Vergleich zum angegebenen Beispiel gibt es keine feste Variable, die ich vorab erstellen kann, um ein Kontrollkästchen als ausgewählt zu markieren, und ich benötige die Daten in einem Array (wie es jetzt korrekt geschieht), um dies später zu verarbeiten. Beachten Sie, dass das Beispiel auf das Minimum reduziert ist. (ohne Requisiten und so weiter)

Hat jemand eine geniale Idee, wie man die Listenelemente anklickbar macht, um die Kontrollkästchen richtig zu aktivieren?

4
ZeroThe2nd 18 Jän. 2019 im 15:44

3 Antworten

Beste Antwort

Hier ist mein Versuch, siehe das Codepen-Beispiel

Ich habe eine Methode erstellt, mit der das Hinzufügen und Entfernen einer Farbe im Array umgeschaltet wird. Dann habe ich die Klickfunktion für die Zeile selbst mit @click.capture.stop="toggleColor(color)" hinzugefügt.

Der Teil .capture.stop prüft, ob ein Benutzer zuerst auf ein Auswahlfeld geklickt hat, und verhindert in diesem Fall, dass die Methode erneut ausgelöst wird. Andernfalls schalten sowohl das Auswahlfeld als auch die Zeile den Wert um, sobald Sie auf ein Auswahlfeld klicken, wodurch sie sich gegenseitig aufheben

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);
    }
  }
}
6
T. Dirks 18 Jän. 2019 im 13:06

Codepen Link

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

@Badgy, Mutation von Originaldaten - ist schlecht. Methode ist besser.


UPD: eine weitere Lösung

1
gleam 18 Jän. 2019 im 13:07

Codepen Link

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

Bringt Ihnen alle ausgewählten Farben als Array.

Diese Lösung bietet Ihnen 2 Vorteile gegenüber Ihrer. Sie können vordefinieren, was aktiviert werden soll, bevor es einmal angeklickt wird, und Sie können auch einfach eine Manipulation des angeklickten Werts des Arrays außerhalb des Kontrollkästchens selbst implementieren.

2
Badgy 18 Jän. 2019 im 12:55