*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>
Initial issue resolved here: https://codepen.io/pandemicprogrammer/pen/GROWqwR
I was referencing the array object incorrectly and had my JSON data in the wrong spot.
methods: {
calc: function (waxWeight, buttonSize, metalType) {
alert("test")
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 }]}
const specificGravity =
metals.metals.find(function(elem){
if(elem.type == metalType) {
alert(elem.specificGravity)
return elem.specificGravity;
}
});
}
},
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