vue.js - Tableau Vuejs getWorkBook() "Cannot read property get_workbook of null"

Question

I am trying to follow the getData example found on the tableau javascript tutorial (https://github.com/tableau/js-api-samples/blob/master/getDataBasic.html) , but for vue js, however, I am unable to get it to work. I am able to render the tableau object, but when it comes to getting the underlying data or even trying to get the workbook name, I get the error: "Cannot read property get_workbook of null". Below is my code:

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

Placing getWorBbook() in onFirstInteractive successfully gets me the workbook name (as shown below), but I am not sure where to go from there in terms rendering the data.

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

question from:https://stackoverflow.com/questions/65894977/tableau-vuejs-getworkbook-cannot-read-property-get-workbook-of-null

Answer 1

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>