javalinVue: not able to get LoadableData to work #2075

cyrilou242 · 2024-01-06T10:59:25Z

Hey, I'm trying to use javalinvue.
I went through the tutorial without issues.

I'm now trying to use LoadableData.
I tried copy pasting the snippet here: https://javalin.io/plugins/javalinvue#loadabledata

<template id="books-component">
    <div>
        <div v-if="books.loading">Loading books ...</div>
        <div v-if="books.loadError">Failed to load books! ({{books.loadError.text}})</div>
        <div v-if="books.loaded" v-for="book in books.data">{{book}}</div>
    </div>
</template>
<script>
    app.component("books-component", {
        template: "#books-component",
        data: () => ({
            books: new LoadableData("/api/books"),
        }),
    });
</script>

But somehow the rendered html is stuck at Loading books ....
It seems the Vue reactivity does not work.

Opening this as a question as I suspect I'm missing something dumb.

My pom dependencies is the following:

    <dependency>
      <groupId>io.javalin</groupId>
      <artifactId>javalin-bundle</artifactId>
    </dependency>
    <dependency>
      <groupId>org.webjars.npm</groupId>
      <artifactId>vue</artifactId>
    </dependency>

And here is the generated html if this helps:

<html>
<head>
  <meta charset="utf8">
  <script src="/webjars/vue/3.3.9/dist/vue.global.prod.js"></script>
  <script>
    const app = Vue.createApp({});
  </script>
  

<script >
    class LoadableData {
        constructor(url, cache = true, errorCallback = null) {
            this._url = url;
            this._errorCallback = errorCallback;
            this.refresh(cache);
            this.addRefreshListener();
        }
        refresh(cache = true) {
            this.data = null;
            this.loading = true;
            this.loaded = false;
            this.loadError = null;
            let cacheKey = "LoadableData:" + this._url;
            if (cache) {
                this.data = JSON.parse(localStorage.getItem(cacheKey)) || null;
                this.loaded = this.data !== null;
                this.loading = this.loaded === false;
            }
            fetch(this._url).then(res => {
                if (res.ok) return res.json();
                throw JSON.stringify({code: res.status, text: res.statusText});
            }).then(data => {
                this.data = data;
                this.loaded = true;
                if (cache) {
                    localStorage.setItem(cacheKey, JSON.stringify(data));
                }
            }).catch(error => {
                this.loadError = JSON.parse(error);
                if (this._errorCallback !== null) { // should probably handle in UI
                    this._errorCallback(error);
                }
            }).finally(() => this.loading = false);
        }
        refreshAll() {
            LoadableData.refreshAll(this._url);
        }
        static refreshAll(url) {
            window.dispatchEvent(new CustomEvent("javalinvue-loadable-data-update", {detail: url}));
        }
        addRefreshListener() {
            window.addEventListener("javalinvue-loadable-data-update", e => {
                if (this._url === e.detail) {
                    this.refresh(false);
                }
            }, false);
        }
    }
</script><!-- books-component -->
<template id="books-component">
  <div>
    <div v-if="books.loading">Loading books ...</div>
    <div v-if="books.loadError">Failed to load books! ({{books.loadError.text}})</div>
    <div v-if="books.loaded" v-for="book in books.data">{{book}}</div>
  </div>
</template>
<script>
app.component("books-component", {
  template: "#books-component",
  data: () => ({
    books: new LoadableData("/api/books"),
  }),
});
</script>

<script >
    app.config.globalProperties.$javalin = JSON.parse(decodeURIComponent('%7B%22pathParams%22:%7B%7D,%22state%22:%7B%22currentUser%22:null%7D%7D'))
</script>
</head>
<body>
<main id="main-vue" v-cloak>
  <books-component></books-component>
</main>
<script>
  app.mount("#main-vue");
</script>
</body>
</html>

The text was updated successfully, but these errors were encountered:

tipsy · 2024-01-07T06:42:35Z

It seems the Vue reactivity does not work.

This is a known issue, there is a PR attempting to fix this: #2070

Other PRs (or help on the current one) would be appreciated :)

cyrilou242 · 2024-01-09T10:14:10Z

Oh ok thanks!
I'll follow the PR.
Will look at the other PRs once I know more about javalin. I'm starting a side project with it.
Thanks for the swift response and the great work!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

javalinVue: not able to get LoadableData to work #2075

javalinVue: not able to get LoadableData to work #2075

cyrilou242 commented Jan 6, 2024

tipsy commented Jan 7, 2024

cyrilou242 commented Jan 9, 2024

javalinVue: not able to get LoadableData to work #2075

javalinVue: not able to get LoadableData to work #2075

Comments

cyrilou242 commented Jan 6, 2024

tipsy commented Jan 7, 2024

cyrilou242 commented Jan 9, 2024