[Vuejs]-Tableau Vuejs getWorkBook() "Cannot read property get_workbook of null"

by

0👍

I realized that the JavaScript API is asynchronous and therefore the let sheet line is executed before while executing the API. Therefore, something like setTimeout will make the line execute after the API has been executed. See below incase anyone was having similar issues:

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

Leave a comment