Question

也许很明显，但是我有一个 Vue单个文件组件，如下所示：

<template>
...
</template>

<script>
    export default {
        props: [ 'matches', 'results' ],

        computed: {

           formattedMatches: function () {
                let rows = [];
                this.matches.forEach(function($match, $i) {
                    rows[$i] = {
                        id: $i + 1,
                        title: $match[0] + ' ' + $match[1]
                    };
                });
                return rows;
            },

            formattedResults: function () {
                let rows = [];
                this.results.forEach(function($resultRow, $i) {
                    rows[$i] = {
                        id: $i + 1,
                        title: this.formattedMatches[$i]     
 // Error in render: "TypeError: Cannot read property 'formattedMatches' of undefined"
                    };
                });
                return rows;
            },
    ...
</script>

如果我尝试this.matches，不仅尝试this.formattedMatches，也会显示错误。我想这是类和方法中可变范围的问题，但是我什至不知道是否还有另一种更好的方法或模式来实现相同的行为。

有什么想法吗？预先感谢。

Answer 1

this在匿名功能forEach中具有不同的上下文。最简单的解决方法是使用箭头功能符号。

this.results.forEach(($resultRow, $i) => {
    rows[$i] = {
        id: $i + 1,
        title: this.formattedMatches[$i]
    };
});

Answer 2

在StackOverflow上基于this other solution找到了解决方案。如它所说，“ this指的是回调本身（或更确切地说，是指回调的执行上下文），而不是Vue实例。如果要访问它，则可以需要将其分配给回调之外的内容“。

所以就我而言...

...
formattedResults: function () {
     let self = this;
     let rows = [];
     this.results.forEach(function($resultRow, $i) {
         rows[$i] = {
              id: $i + 1,
              title: self.formattedMatches[$i]     
         };
     });
     return rows;
},
...

...可以解决问题。还是谢谢你！

Vue.js：无法在计算属性循环中访问（计算）道具

2 个答案: