Vue. js метод компонента возвращает "undefined" в HTML - PullRequest
Новая
       15

Vue. js метод компонента возвращает "undefined" в HTML

0 голосов
/ 19 июня 2020

Я пробовал испытать Dropbox API, согласно Книге Пакта «Завершить Vue. js 2 Веб-разработка (Глава 4)». Поскольку include_media_info недавно устарел, я попытался адаптировать пример кода к dropbox (). FilesGetMetadata () для запроса метаданных изображений.

javascript выглядит так: 

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("")
    },
})

И соответствующий HTML выглядит следующим образом: 

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

Из console.log (Dimensions) в js я заметил, что размеры - это объект с высотой и шириной. Вывод в консоль

Однако он не определен при рендеринге в HTML. Обработано HTML

Я не уверен, есть ли у меня неправильное представление о возвращаемом значении из метода Vue. Поэтому я хотел бы спросить вашего совета. Заранее большое спасибо.

...