Vue 应用程序（数据超出范围）- 数据未在 Proxy.calc 处定义

Question

*问候 Whosebug 窥视。

我正在开发我的第一个 Vue 应用程序，在使用 find 函数循环遍历我的金属列表以根据匹配的类型道具提取 specificGravity 值时遇到问题。看来这个列表超出了范围，我无法通过 good ole'Google 找到解决方案，所以我求助于大家。

TIA*

错误：

"vue@next:1751 Uncaught ReferenceError: 数据未定义在 Proxy.calc (index.html:101:45) 在 onClick（在 compileToFunction 处评估（vue@next:15591:23），:142:35）在 callWithErrorHandling (vue@next:1688:24) 在 callWithAsyncErrorHandling (vue@next:1697:23) 在 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>

Answer 1

我不确定你想在这个函数中做什么，但我会尽力帮助你。

问题是数据无法像那样访问，数据是 return 一个 JSON 对象的函数。因此，假设您想访问数据中声明的 isVisible。您使用 this.isVisible.

但是我不明白为什么你需要访问那里的数据。看来你想访问json对象里面的数组，所以试试metals.metals.find(...)。如果你想访问数组金属，当你调用 elem.name 时你总是会得到 undefined 因为这不是对象的键，你应该使用 elem.type 代替。这是我为您制作的 code pen 来举例说明我在说什么

抱歉，回答很长，如果这对您没有帮助，请提供更多背景信息，以便我可以帮助您

Answer 2

初始问题已在此处解决：https://codepen.io/pandemicprogrammer/pen/GROWqwR

我错误地引用了数组对象，我的 JSON 数据放在了错误的位置。


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

                        

                    });
                }
            },

Vue 应用程序（数据超出范围）- 数据未在 Proxy.calc 处定义

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

javascript

vue.js

scope

find

defined