Vue app (data out of scope) - Data is not defined at Proxy.calc

*Greetings Stackoverflow peeps.

I am developing my first Vue app and having issues with using the find function to loop through my metals list to pull the specificGravity value based on a matching type prop. It seems that the list is out of scope and I am unable to find a solution through good ole' Google, so I turn to you all.

TIA*

Error:

"vue@next:1751 Uncaught ReferenceError: data is not defined at Proxy.calc (index.html:101:45) at onClick (eval at compileToFunction (vue@next:15591:23), :142:35) at callWithErrorHandling (vue@next:1688:24) at callWithAsyncErrorHandling (vue@next:1697:23) at HTMLButtonElement.invoker (vue@next:9486:15)"

<script>
        var app = Vue.createApp({
            data: function() {  
                
                
               
                return {
                    
                    waxWeight: null,
                    isVisible: true,
                    buttonSize: null,
                    specificGravity: null,
                    metalType: null
                }
            },    

            // <!-- COMPONENTS -->
            components: {
                    },

            // <!-- METHODS -->
            // `this` inside methods point to the current Vue instance
            methods: {
                calc: function (waxWeight, buttonSize, metalType) {

                    var waxWeight = waxWeight
                    var buttonSize = buttonSize
                    var metalType = metalType

                var metals = {metals:[
                    { type: 'silver', specificGravity: 10.3 },
                    { type: 'wGold14', specificGravity: 12.1 },
                    { type: 'wGold18', specificGravity: 11.5 },
                    { type: 'yGold14', specificGravity: 13.6 }]}

                    // method does not have access to data list 
                    const specificGravity = data.metals.find(function(elem){
                        if(elem.name == metalType) 
                        
                        return elem.specificGravity;

                        alert(metalType)
                    });
                }
            },
        })
        app.mount('#app')
    </script>

Solution

i'm not sure what you are trying to do in this function, but I will try to help you.

The problem is data is not accessible like that, data is a function that return a JSON object. So imagine you want to access the isVisible declared in the Data. You use this.isVisible.

However I can't understand why you need to access data there. It seems that you want to access the array inside the json object, so try metals.metals.find(...). And if you want to access the array metals, when you are calling elem.name you are always going to get undefined since this is not a key of the object, you should use elem.type instead. Here is a code pen that I made for you to exemplify what I'm saying

Sorry for the long answer, if this not help you please provide more context so I can help you