Vue.js component's methodreturns "undefined" to the HTML

Question

I have tried to experience the Dropbox API, according to Packt's Book "Complete Vue.js 2 Web Development (Chapter 4)". Since the include_media_info has been deprecated recently, I tried to adapt the example code to dropbox().filesGetMetadata() to query the metadata of images.

The javascript is like that:

Vue.component("dropbox-viewer", {
    template: "#dropbox-viewer-template",

    data() {
        return {
            accessToken:
                "XXXXXX",
            structure: [],
        }
    },

    methods: {
        dropbox() {
            return new Dropbox.Dropbox({
                accessToken: this.accessToken,
                fetch: fetch,
            })
        },

        getFolderStructure(path) {
            this.dropbox()
                .filesListFolder({ path: path })
                .then((response) => {
                    console.log(response.entries)
                    this.structure = response.entries
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        getDimensions(path) {
            let dimensions = ""
            this.dropbox()
                .filesGetMetadata({ path: path, include_media_info: true })
                .then((response) => {
                    if ("media_info" in response) {
                        dimensions = response.media_info.metadata.dimensions
                        console.log(dimensions)
                        console.log(typeof dimensions)
                        return dimensions
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },

    created() {
        this.getFolderStructure("")
    },
})

And the relevant HTML is as below:

<div>
   <h1>Dropbox Viewer</h1>
   <li v-for="entry in structure">
      <span>{{ entry[".tag"] }}</span>
      <strong>{{ entry.name }}</strong>
      <span v-if="entry.size"> - {{ entry.size }}</span>
      <span v-if="entry['.tag'] === 'file'">
         {{ entry.path_lower }}
         {{ typeof getDimensions(entry.path_lower) }}
      </span>
   </li>
</div>

From the console.log(dimensions) in the js, I notice that dimensions is an object with height and width. Console output

However, it is undefined when it is rendered in the HTML. Rendered HTML

I am not sure if I have any misconception about the returned value from Vue's method. So I would like to seek your advice. Thank you very much in advance.

`getDimensions` doesn't return anything so `{{ typeof getDimensions(entry.path_lower) }}` will only ever show "undefined" — Phil, Jun 19 '20 at 04:00
So that means the "return dimensions" in the if statement from the promise of getDimensions is not working? Thanks~ — Chan Xens, Jun 19 '20 at 04:02
Does this answer your question? [How to display async data in vue template](https://stackoverflow.com/questions/49745497/how-to-display-async-data-in-vue-template). See also the more general [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Phil, Jun 19 '20 at 04:04

Vue.js component's methodreturns "undefined" to the HTML

0 Answers0