Javascript 我在我的Vue组件中陷入无限状态有什么原因吗？

我正在使用SharePoint Online和Vuejs

我试图显示一个表，在每个单元格中都会有一个函数调用，其中有两个参数传递给一个方法，以过滤对列表的axios调用。当我在一个单元格中调用时，它可以正常工作，但是当我将调用添加到具有不同参数的不同单元格时，我的代码进入无限循环。当我看到控制台和页面上的数字闪烁时，我可以从我的开发工具中分辨出来。它似乎出于某种奇怪的原因多次调用该方法，我甚至没有使用任何类型的循环。代码如下：

Vue.component（'msr-table'{
模板：
`
LCAT
位置1
位置2
位置3
位置4
位置5
位置6
位置7
位置8
位置9
运筹学分析员
{{getMsrInputData（'Position 1'，'Operations Research Analyst'）}
{{getMsrInputData（'Position 2'，'operation Research Analyst'）}
研究分析员
`,
方法：{
getMsrInputData:函数（lName，lCat）{
endPointUrl=\u spPageContextInfo.webAbsoluteUrl+“/\u api/web/lists/getbyTitle（'Track List'）/items？$select=lists&$filter=substringof（“+lName+”，%20Lists）%20和%20（mCAT%20eq'+mCAT+”）；
var vm=这个；
get（endPointUrl）.then（函数（响应）{
vm.num=response.data.value.length；
console.log（vm.num）；
}).catch（函数（错误）{
console.log（错误）
});
返回这个.num；
},    
}
})

我什么都做了，只是不知道为什么。如有任何想法/帮助，将不胜感激。谢谢

---

我只需要在每次调用时返回一个值。

使用vue.js的

data

属性而不是在模板中调用方法可能会更容易。下面是一个简短的未经测试的例子来说明这个想法

Vue.component('msr-table', {
    template: 
    `
        <table>
            <tr>
                <th>LCAT</th>
                <th>Position 1</th>
                <th>Position 2</th>
                <th>Position 3</th>
                <th>Position 4</th>
                <th>Position 5</th>
                <th>Position 6</th>
                <th>Position 7</th>
                <th>Position 8</th>
                <th>Position 9</th>                                                                                
            </tr>
            <tr>
                <td>Operations Research Analyst</td>
                <td>{{ positionOneData }}</td>
                <td>{{ positionTwoData }}</td>
                <td></td>
                <td></td>   
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td> 
            </tr>                 
            <tr>
                <td>Research Analyst</td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>   
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td> 
            </tr>                 
        </table>
    `,
    data: {
       positionOneData: '',
       positionTwoData: '',
    },
    created() {
        this.getMsrInputData('positionOneData', 'Position 1', 'Operations Research Analyst');
        this.getMsrInputData('positionTwoData', 'Position 2', 'Operations Research Analyst');
    },
    methods: {
        getMsrInputData: function(key, lName,lCat){                      
            endPointUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbyTitle('Track List')/items?$select=Lists&$filter=substringof('"+ lName +"',%20Lists)%20and%20(mCAT%20eq '"+ mCat +"')";
            axios.get(endPointUrl).then((response) => {
                this[key] = response.data.value.length; // this line will update the data
            }).catch(function(error){
                console.log(error)
            });       
        },    
    }
})

Vue.component（'msr-table'{
模板：
`
LCAT
位置1
位置2
位置3
位置4
位置5
位置6
位置7
位置8
位置9
运筹学分析员
{{positionOneData}}
{{positionTwoData}}
研究分析员
`,
数据：{
位置一数据：“”，
位置数据：“”，
},
创建（）{
这个.getMsrInputData（'positionOneData'，'position1'，'operation Research Analyst'）；
这个.getMsrInputData（'positionTwoData'，'position2'，'operation Research Analyst'）；
},
方法：{
getMsrInputData:函数（键、lName、lCat）{
endPointUrl=\u spPageContextInfo.webAbsoluteUrl+“/\u api/web/lists/getbyTitle（'Track List'）/items？$select=lists&$filter=substringof（“+lName+”，%20Lists）%20和%20（mCAT%20eq'+mCAT+”）；
get（endPointUrl）.then（（响应）=>{
this[key]=response.data.value.length；//此行将更新数据
}).catch（函数（错误）{
console.log（错误）
});       
},    
}
})

为什么要将

返回this.num

在最后一个

的外部，然后

块？将值返回给调用函数。这是错误的吗？在这种情况下，您的方法将在axios调用实际完成之前返回。您可能需要修改js承诺的工作方式。当我将返回添加到第一个.then（）块时，不会返回任何内容。我的理解是，调用完成后，then拥有我的数据，但返回在该块中不起作用。对于then to中的返回，您必须在方法中返回整个axios调用承诺，然后在调用时等待它。在当前代码中，您返回的是

this.num

，没有任何人对其设置值。我没有得到

this[key]

部分。你能详细说明一下吗？它是否与此.positionOne数据相同？不知道js语法使用变量（

key，在本例中为
键）作为对象键是什么样的。请参见hmmm…，看起来它可以用于访问Vue的数据属性中的值。那是新的。谢谢你的解决方案奏效了。啊……我花了一些时间，但我现在得到了
vm[key]
。data属性是一个对象，因此可以正常工作。美好的