Ich gehe eine Reihe von Objekten durch, um in meinem HTML einige auswählbare Informationsfelder anzuzeigen. Dafür binde ich eine Klasse im Ereignisklick, aber wenn ich die Elemente durch ein v-for erhalte, bindet es die Klasse an alle, wenn ich eines auswähle.

Wie kann ich nur den ausgewählten unterscheiden?

Ich habe mehrere Beispiele mit jquery gesehen, würde aber gerne wissen, ob es eine andere Methode gibt.

Meine Vorlage:

<div class="list-services">
  <div class='column-service' 
    v-for='estimation in filteredEstimation' 
    v-bind:key="estimation.name" 
    :class="{ focusService }" 
    @click="focusService = !focusService"
  >
    <div class="service-name">
      {{estimation.name}}
    </div>
    <div class="service-description">
      {{estimation.description}}
    </div>
    <div class="service-price">
      {{estimation.price}} 
      <span class="price-currency">€</span>
    </div>
  </div>
</div>

Vielen Dank für Ihre Zeit und Hilfe.

1
homerThinking 19 Aug. 2020 im 13:33

2 Antworten

Beste Antwort

Ich habe versucht, eine jsfiddle zu erstellen, um Ihre Frage zu beantworten, aber dann habe ich diese jsfiddle im vue.js-Forum gefunden: https://jsfiddle.net/mogtfpze/2/

Es bietet drei verschiedene Optionen zum Hervorheben von Inhalten durch Klicken.

li v-for="item in items" 
  :class="{highlight:item.id == selected}" 
  @click="selected = item.id">
  {{item.id}}
</li>

Obwohl es eine alte Antwort ist, glaube ich, dass es immer noch mit der aktuellen Vue-Version kompatibel sein sollte.

Wenn nicht oder wenn etwas nicht klar ist, lass es mich wissen und ich werde versuchen, dir zu helfen!

2
Thaeke Hekkenberg 19 Aug. 2020 im 11:05

Die Methode, die ich persönlich verwende (wenn ich Ihre Frage richtig verstehe), ist das Schlüsselwort this.

Beispielsweise:

Index.html

<ul id="myList">
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

Script.js (Vanilla JavaScript)

var myList = document.getElementById("myList");
    myList.addEventListener("click", function () {
    console.log(this);
    console.log(this.innerText);
});

Script.js (jQuery)

var myList = $("#myList").on("click", function() {
    console.log(this);
    console.log(this.innerText);
});

In diesem Fall können wir mit dem Schlüsselwort this den inneren Text des Elements li abrufen, auf das geklickt wurde, indem nur der Ereignis-Listener an das übergeordnete Element angehängt wird. innerHtml ist nur eine von vielen Möglichkeiten, dieses Schlüsselwort zu verwenden. Sie können mehr davon sehen, indem Sie console.log(this) in Ihrer Ereignis-Listener-Funktion ausführen.

Lassen Sie mich wissen, ob das hilft!

2
Mason Curtis 19 Aug. 2020 im 11:10