Obycejny cyklus ve vue.js

Ahoj,

muzete mi poradit jak snadno inicializovat cyklus ve vue.js, pokud z API dostanu tento objekt?

Kód:

{password: "The Heslo field is required.", password_again: "The Heslo znovu field is required."}

Potrebuju vytahnout klice a pomoci toho si pak dohledat prvek na strance, ktery obarvim jako chybny, apod.

V-FOR je pro neco jineho, s tim problem nemam, kdyz vypisuji treba seznam produktu.

At googlim jak chci, tak zadne reseni, co by fungovalo na fraze vuejs loops proste nevidim. Zrejme mi neco unika...

Kód:

        $do = new Vue({
            el: '#verifyAccount',
            
            data: {
                alertClass: 'hidden',
                alertText: '',
                password: '',
                password_again: '',
                errors: []
            },

            methods: {
                sendForm: function () {
                    data = JSON.stringify(this._data);

                    this.$http.post('http://localhost/api/accounts/passwordset', data)
                    .then(
                        response => {
                            response = JSON.parse(response.bodyText);
                            console.log(response.errors);
                            this.alertClass = response.alert.class;
                            this.alertText = response.alert.content;

                           //tady ten cyklus musi vzit hodnotu response.errors...
                        },

                        response => {
                            this.alert = response.alert.content;
                        },                    
                    );
                }

Tohle nejde:

Kód:

response.errors.map((error) => {
   console.log(error);
});

Mně asi taky něco uniká. Co myslíte tím "nejde to"? Vrátí to nějakou chybu, nemá to očekávané chování či co?

EDIT: Myslím si, že se ptáte na špatnou otázku. Pokud si opravdu vracíte v JSON pod klíčem "errors" nějaké pole, neexistuje důvod, proč byste přes něj nemohl iterovat. Chybu bych hledal jinde. To nebude nic specifického s Vue.

Jediné na co bych si dal pozor, je při editaci pole, které je členem "data" objektu instance onoho Vue komponentu, viz. zde: https://vuejs.org/2016/02/06/common-gotchas/

Kdyz by se mel udelat ten cyklus ".map", tak to napise v konzoli response.errors.map is not a function..

To protože "errors" nebude pole, a nemá tudíž člena "map".

A jak k tomu tedy pristoupit? Tohle je JSON odpoved. Na tu se aplikuje JSON.parse(response.bodyText) a ja pak mohu pristoupit bez problemu treba k alert.class nebo alert.content.

Errors pole ma dle meho stejnou strukturu, ale cyklus na to nejde aplikovat.

Kód:

{
    "code": 422,
    "header_code": 200,
    "data": false,
    "message": "",
    "alert": {
        "class": "alert-primary",
        "icon": "warning",
        "title": "Pozor!",
        "content": "Bad validation"
    },
    "errors": {
        "email": "The Email field must contain a valid email address.",
        "name": "The Name field is required.",
        "b_id": "The IČ field is required."
    }
}

Opět - "errors" není pole ([]), nýbrž objekt ({}). Iterovat přes členy objektu můžete pomocí "Object.keys()", viz https://developer.mozilla.org/en-US/...ts/Object/keys

Původně odeslal Miroslav Foltýn ↪

Opět - "errors" není pole ([]), nýbrž objekt ({}). Iterovat přes členy objektu můžete pomocí "Object.keys()", viz https://developer.mozilla.org/en-US/...ts/Object/keys

Děkuji moc za Váš čas a rady.

Object.entries
for..in
ES6: for..of

Pořadí není zaručeno.

Mimochodem, jak docilim toho, abych nemel konflikt v "this"? Kdyz pristupuji treba v this.$refs a funguje to a pak jsem treba uvnitr cyklu a tam uz toto neplati, proto "this" prevezne hodnotu v tom cyklu?

přiřaď si konkrétní this do jiné proměnné, např. var self = this; a poté v cyklu self.$refs

Od toho jsou preci arrow funkce, ktere nemaji vlastni "this" vazbu. https://developer.mozilla.org/en-US/...rrow_functions

Obzvlaste pokud transpilujete neni duvod to tak nepsat. Jinak IE to nepodporuje.

Diky, panove. Jsem o krok dal. Ale posledni problem je asi ten, ze self.$refs.password.innerText je sice v poradku, ale pokud to chci dynamicky pres promennou, takze self.$refs.[field].innerText, tak to rve ze Cannot set property innerText of undefined.

Takze patrne to musi byt uzavreno do neceho ve smyslu after onload?

Bez te tecky pred [field].

Zkuste naslouchat ty errory z console a nastudovat si syntaxi, setri to cas.

Původně odeslal Miroslav Foltýn ↪

Bez te tecky pred [field].

Zkuste naslouchat ty errory z console a nastudovat si syntaxi, setri to cas.

Ta tecku tu byla nedopatrenim. Problem byl jinde. Jeste jednou diky.