Obycejny cyklus ve vue.js

David Musil

(68 hodnocení)

1. 4. 2019 16:54:57

Ahoj,

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

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...

$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:

1. 4. 2019 16:54:57

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395326

Miroslav Foltyn

(3 hodnocení)

1. 4. 2019 17:01:35

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/

1. 4. 2019 17:01:35

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395325

David Musil

(68 hodnocení)

1. 4. 2019 17:46:49

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

1. 4. 2019 17:46:49

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395324

Miroslav Foltyn

(3 hodnocení)

1. 4. 2019 17:53:39

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

1. 4. 2019 17:53:39

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395323

David Musil

(68 hodnocení)

1. 4. 2019 18:07:43

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.

1. 4. 2019 18:07:43

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395322

Miroslav Foltyn

(3 hodnocení)

1. 4. 2019 18:12:38

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/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

1. 4. 2019 18:12:38

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395321

David Musil

(68 hodnocení)

1. 4. 2019 18:27:00

Napsal Miroslav Foltýn;1519996
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/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

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

1. 4. 2019 18:27:00

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395320

Martin Schlemmer

(37 hodnocení)

1. 4. 2019 19:39:07

Object.entries

for..in

ES6: for..of

Pořadí není zaručeno.

1. 4. 2019 19:39:07

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395319

David Musil

(68 hodnocení)

2. 4. 2019 12:41:59

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?

2. 4. 2019 12:41:59

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395318

TomasX

(4 hodnocení)

2. 4. 2019 12:44:55

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

2. 4. 2019 12:44:55

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395317

Miroslav Foltyn

(3 hodnocení)

2. 4. 2019 13:06:37

Od toho jsou preci arrow funkce, ktere nemaji vlastni "this" vazbu. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

2. 4. 2019 13:06:37

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395316

David Musil

(68 hodnocení)

2. 4. 2019 13:28:49

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..innerText, tak to rve ze Cannot set property innerText of undefined.

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

2. 4. 2019 13:28:49

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395315

Miroslav Foltyn

(3 hodnocení)

2. 4. 2019 13:31:03

Bez te tecky pred .

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

2. 4. 2019 13:31:03

https://webtrh.cz/diskuse/obycejny-cyklus-ve-vue-js/#reply1395314

David Musil

(68 hodnocení)