Inkrementieren/Dekrementieren mit dynamischem Wert in Vue Slider

localhost

Ich verwende Vue Slider und möchte den Slider auf den nächsten Index erhöhen und so weiter. Derzeit wird es um 1 erhöht, da 1 in den Parametern der setIndex-Funktion fest codiert ist. Wenn ich eine Variable übergebe, führt dies zu einem Fehler. Ich glaube, die Funktion setIndex akzeptiert keinen Variablennamen.

<button @click="setIndex('m-slider', 1)">+</button>

setIndex(name, num) {
  let slider = this.$refs[name];
  slider.setIndex(num);
}

Wie kann ich den Schaltflächenklick bei jedem Klick zum nächsten Index im Schieberegler und im Hardcode-Wert erhöhen/verringern?

Jom T.

Nun, Sie benötigen einen Verweis auf den alten/vorherigen Index, von dem aus Sie inkrementieren möchten.

<button @click="goToSlide('m-slider')">+</button>
<button @click="goToSlide('m-slider', false)">-</button>

data() {
  return {
    slides: []
  }
},

methods: {
  goToSlide(name, next = true) {
    let slider = this.$refs[name];
    let offset, currentIndex = slider.getIndex();

    if (next) {
      offset = Math.min(this.slides.length - 1, currentIndex + 1);
    } 
    else {
      offset = Math.max(0, currentIndex - 1);
    }

    slider.setIndex(offset);
  }
}

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

CircularPercentIndicator mit dynamischem Wert

ngTemplateOutlet mit dynamischem Wert

Maximalwertprüfer mit dynamischem Wert

jQuery hasClass() mit dynamischem Wert

Dplyr-Filter mit dynamischem Spaltennamen und dynamischem Wert

Zeichenfolge in Vorlage mit dynamischem Wert übersetzen

JacksonXmlRootElement mit dynamischem localName-Wert

SQL-Alias-FALL mit dynamischem Wert

Aufzählungsfarben mit dynamischem Alpha-Wert

SQL-PIVOT-Tabelle mit dynamischem Wert

Variable einmal mit dynamischem Wert initialisiert

Jquery-Selektor mit dynamischem Wert

Automatische Polymerknotensuche mit dynamischem ID-Wert

URL-Änderung mit dynamischem Wert erkennen

Probleme mit dynamischem CSS in Vue-laravel

feste Seitenleiste mit dynamischem Inhalt in vue js

JSON-Wert mit dynamischem Schlüssel mit Python lesen

MenuItem mit dynamischem Wert funktioniert in Material UI React nicht

Modal mit dynamischem Inhalt setzt keinen Wert auf das Textfeld

Dygraphen Umgekehrte y-Achse mit dynamischem Maximum (niedrigerer Wert)

Benutzerdefinierter WooCommerce-Endpunkt mit dynamischem Wert funktioniert nicht

Wie man gleichwertige horizontale Einschränkungen mit dynamischem Wert hat

Header der Apex-Hauptregion mit dynamischem Wert

Optionsfeld mit dynamischem Wert aus der Eingabe als Label

VueJS: Eingabe mit dynamischem Wert + V-Modell

PHP: Wert des Arrays mit dynamischem Schlüssel löschen

Ansible Setting Fakt mit dynamischem Schlüssel / Wert

So erhalten Sie verschachtelten JSON mit dynamischem Wert

Zeichnen Sie SVG mit dynamischem Wert auf Leinwand

TOP Liste

  1. 1

    So verschieben Sie ein Bild in Flutter/Dart mit einem Draggable

  2. 2

    Unity Build-Fehler: Der Name 'EditorUtility' ist im aktuellen Kontext nicht vorhanden

  3. 3

    TypeAhead.js zeigt keine Ausgangsschienen an?

  4. 4

    Deklarieren einer nicht initialisierten Variablen in der Klassendefinition in Python

  5. 5

    Wie kann ich eine verschachtelte Schleife mit lapply in R ersetzen?

  6. 6

    spring-data-jpa: ORA-01795: Die maximale Anzahl von Ausdrücken in einer Liste beträgt 1000

  7. 7

    Warum funktioniert Phantomjs nicht mit dieser Site?

  8. 8

    Interpolieren Sie mit Python die 2D-Matrix entlang der Spalten

  9. 9

    numpy: Berechnen Sie die Ableitung der Softmax-Funktion

  10. 10

    Wie vermeide ich, dass die gesamte App neu geladen wird, wenn Nav.Link von React-Bootstrap verwendet wird?

  11. 11

    MongoDB eingebettetes Dokument unterscheiden und filtern

  12. 12

    Aktualisieren des Werts im Json-Objekt in Python

  13. 13

    Warum funktioniert das Umgebungslicht in diesem Beispiel nicht?

  14. 14

    Python gibt einen Fehler aus, dass eine Datei nicht vorhanden ist, wenn dies eindeutig der Fall ist

  15. 15

    Wie verwende ich Format-Table ohne Abschneiden von Werten?

  16. 16

    So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

  17. 17

    Überprüfen Sie, ob der ausgewählte Wert 'YES' ist, wenn ja, aktivieren Sie ein Steuerelement mit Javascript

  18. 18

    Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

  19. 19

    Holen Sie sich verwandte Pillen Inhalt mit angeklickten img in Angular

  20. 20

    Eclipse Oxygen - Projekte verschwinden

  21. 21

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

heißlabel

Archiv