Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Vue.js Conditions

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Vue.js Conditions

    Hallo Zusammen,

    ich hab ein kleines Verständisproblem bei den Bedingungen von Vue.js. Wenn das Thema hier falsch ist, bitte verschieben oder gar schließen.

    Ich möchte zwei Variabeln in Vue mit v-show , bzw. v-if vergleichen.

    Code:
    <div v-show="message.user.name === activeUser">
    Gebe es aus, wenn es gleich ist
    </div>
    
    export default {
        data() {
            return {
                activeUser: $('.navbar-right .dropdown-toggle').text(),
            }
        },
    .........
    }
    Der Code gibt weder einen Fehler in der Console noch irgendwas aus.
    Wenn ich mir die Variabeln ausgeben lasse, wie im folgenden Abschnitt, werden die Werte erfolgreich ausgegeben.

    Code:
    Debug:
    <small>{{ message.user.name }} {{activeUser}} </small>
    
    // Kekse Kekse
    Wenn ich eine Bedinung, mit nur einer Variabel ausgebe, funktioniert es auch.
    Code:
    <div v-show="message.user.name === 'Kekse'">
    Kann mir jemand auf die Sprünge helfen, wo ich meinen Denkfehler habe ?

    Viele Grüße
    _cyrix_

    Edit:
    Code:
    <small>{{ message.user.name.length }} {{activeUser.length}} </small>
    // 5 43
    Bei diesem Code, werden unterschiedliche Längen ausgegeben. Warum nutzt er hier die Stringlänge vom jquery und nicht vom Ergebnis ?
    Learning by Doing --> Projekt eigenes BG via Laravel 5 umsetzen <--
    Laravelgemeinschaft bei php.de
    Laravel Chat


  • #2
    Du bist dir bewusst, dass wenn du jQuery und VueJS einsetzt, dass du einerseits einen Stilbruch beginnst und anderseits VueJS auch gleich lassen könntest? Es gibt keinen Grund, jQuery komplementär einzusetzen, weil VueJS alles, was jQuery kann auch kann. Zudem gibt es nichts, was mehr falsch sein könnte, als VueJS- und jQuery-Code zu vermischen...

    Du könntest das ganz einfach erreichen, indem du dem Tag, das du auslesen möchtest, ein Model zuweist: https://alligator.io/vuejs/v-model-two-way-binding/

    Das bleibt dann auch dynamisch (also Wert im Tag wird aktualisiert -> this.modelValue wird aktualisiert -> v-show wird neu evaluiert).
    GitHub.com - ChrisAndChris - RowMapper und QueryBuilder für MySQL-Datenbanken

    Kommentar


    • #3
      Danke fürs Feedback.
      Das mit dem Stilbruch ist mir bewusst gewesen, aber hab ich irgendwie verdrängt. Werde ich aber abändern.

      v-model kann ich nicht auf ein
      Code:
      "<a></a>"
      Element anwenden, somit muss ich hier auf ref zurückgreifen.
      Die Lösung meines Problems, war es aber auch nicht, hat mich aber auf den richtigen Weg gebracht. Es wurde immer das korrekte Ausgeben, allerdings beim "activeUser", Freizeichen von der Formatierung mit einberechnet. Die Funktion
      Code:
      .trim()
      hat mir hier geholfen. Werde aber jetzt das Layout mal komplett überarbeiten.
      Thema ist damit abgeschloßen. Danke dir ChristianK.

      Grüße
      Learning by Doing --> Projekt eigenes BG via Laravel 5 umsetzen <--
      Laravelgemeinschaft bei php.de
      Laravel Chat

      Kommentar

      Lädt...
      X