WebHU - Programozási kérdések és válaszok

Vue.js – a funkció nem fut le az adatok frissítésekor

Ez a funkciókód szerepel a vue összetevő metódusaiban, amely eltávolítja az ügyfelek adatait, ha egy gombra kattintanak, és Chrome-értesítést jelenítenek meg.

        deleteCustomer(id) {
            console.log('deleting customer:' + id);
            db.customers.delete(id).then( () => {
            console.log('customer '+ id +' deleted!');
            browser.notifications.create('deleted',{
                type: 'basic',
                iconUrl: 'icons/128.png',
                title: 'Data removal',
                message: 'data removed with success!'
            });
            this.viewCustomers();
           });
        },

A függvény végén egy másik metódust hívok meg, amelynek egy dexie.js példányt kellene meghívnia, hogy egy táblázatban jelenítse meg az összes tárolt ügyféladatot. Amikor az összetevő fel van szerelve, minden jól működik a viewCustomers függvénnyel, és a táblázat megfelelően van feltöltve. Amit ki kell javítanom, az az, hogy a metódus nem kerül meghívásra az adatok törlése után, és a tábla nem frissül. Hogyan tudom ezt megjavítani, van-e olyan vue funkció, amelyet használhatok, vagy bármilyen kódmódosítás, amely megoldja ezt a problémát?

javascript vue.js vuejs2 vue-component dexie
25.06.2020

  • db.customers.delete ez egy aszinkron hívás? 25.06.2020
  • itt található a dokumentumok dexie.org/docs/API-Reference#delete-items , példát ad, ahol az await kulcsszót használják, valószínűleg aszinkron. 25.06.2020

Válaszok:


1

Amint azt a dokumentumokban említettük, az Elemek törlése valójában egy aszinkron hívás, ami azt jelenti, hogy az elem törlése előtt hívja a this.viewCustomers()-t, ezért úgy tűnik, hogy nem működik. Ennek legegyszerűbb módja az async/await használata, például:

async deleteCustomer(id) {
  console.log('deleting customer:' + id);
  await db.customers.delete(id);
  console.log('customer ' + id + ' deleted!');
  browser.notifications.create('deleted', {...});
  this.viewCustomers();
},

Most a this.viewCustomers függvény csak akkor kerül meghívásra, ha a db.customers.delete() függvény befejeződött, és ennek a kívánt kimenetet kell eredményeznie.

25.06.2020
  • A .delete() függvény meghívása után hozzáadtam egy then-t. Az értesítés megjelenik, de a funkció nem hajtódik végre. Frissítem a kódot az általad javasoltak szerint. Köszönöm a segítséget 25.06.2020
  • Kérjük, frissítse kódját, hogy megmutassa, hogyan adta hozzá a then és a viewCustomers then-be. Kérjük, fejtse ki azt is, hogy mit értesz the function isn't executed. alatt. Úgy érted, ha egy konzolnaplót teszel a viewCustomers belsejébe, amely nem jelenik meg? 25.06.2020
  • A kód tesztelése, de nem működik a várt módon, az értesítés leállt :( 25.06.2020
  • @palash Frissítettem a kódot a következővel: then. A this.viewCustomers() függvényre azt értem, hogy az adattörlés után nem hívódik meg, és a táblázat mindig a régi adatokat mutatja 25.06.2020
  • próbáltad használni a debugger kulcsszót, hogy megnézd, mi történik a then visszahíváson belül? 25.06.2020
  • nem, nem próbáltam. A dexie dexie.org/docs/Collection/Collection.each .each módszerét használom () a tárolt adatok megjelenítéséhez nem hiszem, hogy ez a probléma? 25.06.2020

    • 2

    Némi fejtörés után találtam egy trükkös megoldást, amely lehetővé teszi, hogy frissítsem a táblázatot a frissített adatokkal. Az chrome.notifications API onClicked metódusát használtam, és most minden jól működik, de nyitott vagyok minden javaslatra a problémával kapcsolatban. Íme a kód, amelyet hozzáadtam a vue példány csatolt részéhez:

        mounted() {
        console.log('mounted')
        this.$set(this, 'isActive', true)
        this.viewCustomers()
        browser.notifications.onClosed.addListener( (notificationId) => {
            console.log(notificationId)
            this.customersList = [];
            this.viewCustomers();
        })
    }
    25.06.2020
    Új anyagok
    A rádiógomb ellenőrzött eseményének használata a jQueryben
    Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
    Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
    Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
    Miért érdemes elkezdeni a kódolást 2023-ban?
    01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
    🎙 Random Noise #2  – Örökbefogadás és hit
    az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
    A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
    A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
    5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
    Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
    Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
    A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..