Vue und Flexbox - Probleme

  • Hallo,


    hier der Code auf codepen: https://codepen.io/werdas34/pen/XQLZPq


    Ich möchte auf meiner Startseite mehrere Events anzeigen. Ist das Fenster maximal sollen drei Events nebeneinander mittig auf der Webseite stehen. Die weiteren Events sollen sich unterhalb anordnen. Sprich sind es fünf Events dann sollen drei in der ersten Reihe stehen und die zwei darunter folgen. Das ganze soll auch responsive sein. Wird das Fenster kleiner dann sollen nur noch zwei in der ersten Reihe zwei in der zweiten Reihe und eins in der letzten Reihe stehen.


    Nur verstehe ich nicht so ganz weshalb es bei mir nicht funtioniert(bin noch Anfänger).

    Die Klasse wrapper ist der Flexbox Cointainer und die Events sind die Items. Laut mehreren Tutorials sollte dies funktionieren. Oder liegt es an Vue?



    Ich kann auch die Reihenfolge der Items bestimmen(order: 1;). Wie mache ich das, damit ich mittels der Vue Instanz auf die order Elemente zugreifen kann?

    Also in etwa so:


    mfg werdas34

  • Der Kern des Problems ist, dass Du den #wrapper zum Flexcontainer gemacht hast. Dieser enthält jedoch nur ein einziges Flexitem, nämlich .event und darin sind die a-href-Elemente versammelt. Vue organisiert das anscheinend etwas anders als Du es dir vorgestellt hast. display:flex wird nicht vererbt, d. h. Du musst .event zum Flexcontainer machen durch display:flex, dann funktioniert es.

    https://codepen.io/Sempervivum/pen/zXVWqy

    Den #wrapper habe ich gelöscht, weil man ihn dann nicht mehr braucht.

  • Vielen Dank Sempervivum. Das war sehr hilfreich.


    Ich hätte noch zwei kleine weitere Fragen:

    1) Ich benutze select Boxen und das Problem ist, das sie anfangs nicht beschriftet sind. Das Liegt an Vue, denn wenn man dies entfernt, dann funktioniert es.

    Bsp: https://codepen.io/werdas34/pen/joNGyN


    2) Wie man an meinen vorherigen Beispiel sehen kann verwende ich ein allEvents Array. Wenn ich auf das zweite Event klicke dann geht er intern zu allEvents[1]. Wie komme ich an den Index 1 ran? Bzw. allgemein wie komme ich bei meinem Fall an den Index?



    mfg werdas34

  • Ich habe eine Weile über diesem gerätselt:

    https://vuejs.org/v2/guide/forms.html

    Zitat

    v-model will ignore the initial value, checked or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth. You should declare the initial value on the JavaScript side, inside the data option of your component.

    und

    Zitat

    If the initial value of your v-model expression does not match any of the options, the <select> element will render in an “unselected” state.

    aber es schließlich verstanden. Dies funktioniert: