Tableau Vuejs getWorkBook()“无法读取 null 的属性 get_workbook”答案

【问题标题】：Tableau Vuejs getWorkBook() "Cannot read property get_workbook of null"Tableau Vuejs getWorkBook()“无法读取 null 的属性 get_workbook”
【发布时间】：2021-01-26 02:06:57
【问题描述】：

我正在尝试遵循在 tableau javascript 教程 (https://github.com/tableau/js-api-samples/blob/master/getDataBasic.html) 上找到的 getData 示例，但是对于 vue js，我无法让它工作。我能够渲染 tableau 对象，但是在获取基础数据甚至尝试获取工作簿名称时，我收到错误：“无法读取 null 的属性 get_workbook”。以下是我的代码：

<template>
    <div class="container" style="margin-top: 90px;">

        <div id="vizContainer2"></div>

    </div>
</template>

<script>
export default {
  name: 'TableauHolder',
  methods: {
        getUnderlyingData(){
            const containerDiv = document.getElementById("vizContainer2")
            let url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms"
            let options = {
                hideTabs: true,
                hideToolbar: true,
                onFirstInteractive: () => { 
                }
                
            }
            this.viz = new window.tableau.Viz(containerDiv, url, options)
            let sheet = this.viz.getWorkbook().getActiveSheet().getWorksheets().get("Storm Map Sheet")
            console.log(sheet)
        },
        
        
    },
    mounted () {
        window.addEventListener('load', () => {
            this.getUnderlyingData();
        })
    }
}

</script>

在 onFirstInteractive 中放置 getWorBbook() 成功为我获取了工作簿名称（如下所示），但在呈现数据方面我不确定从那里去哪里。

<template>
    <div class="container" style="margin-top: 90px;">

        <div id="vizContainer2"></div>

    </div>
</template>

<script>
export default {
  name: 'TableauHolder',
  methods: {
        getUnderlyingData(){
            const containerDiv = document.getElementById("vizContainer2")
            let url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms"
            let options = {
                hideTabs: true,
                hideToolbar: true,
                onFirstInteractive: () => {
                    let sheet = this.viz.getWorkbook()
                    console.log(sheet)
                }
                
            }
            this.viz = new window.tableau.Viz(containerDiv, url, options)

        },
        
        
    },
    mounted () {
        window.addEventListener('load', () => {
            this.getUnderlyingData();
        })
    }
}

</script>

【问题讨论】：

标签： vue.js tableau-api

【解决方案1】：

我意识到 JavaScript API 是异步的，因此在执行 API 之前执行 let sheet 行。因此，像 setTimeout 这样的东西会让该行在 API 执行后执行。如果有人遇到类似问题，请参见下文：

<template>
    <div class="container" style="margin-top: 90px;">

        <div id="vizContainer2"></div>

    </div>
</template>

<script>
export default {
  name: 'TableauHolder',
  methods: {
        getUnderlyingData(){
            const containerDiv = document.getElementById("vizContainer2")
            let url = "http://public.tableau.com/views/RegionalSampleWorkbook/Storms"
            let options = {
                hideTabs: true,
                hideToolbar: true,
                onFirstInteractive: () => { 
                }
                
            }
            this.viz = new window.tableau.Viz(containerDiv, url, options)
            setTimeout(() => { 
                let sheet = this.viz.getWorkbook().getActiveSheet();
                console.log(sheet);
            }, 3000); 

        },
        
        
    },
    mounted () {
        window.addEventListener('load', () => {
            this.getUnderlyingData();
        })
    }
}

</script>

【讨论】：