0

我正在尝试将数据传递给数据函数内部的接收数组，我正在从 firebase 获取数据并希望在 vue 表中显示，但它显示错误

Uncaught TypeError: Cannot set property 'received' of undefined 谁能帮我怎么做？提前致谢

TypeError: Cannot set property 'receieved' of undefined
    at eval (Main.vue?48a8:78)
    at eval (index.cjs.js?8c4d:4337)
    at LLRBNode.inorderTraversal (index.cjs.js?8c4d:2689)
    at LLRBNode.inorderTraversal (index.cjs.js?8c4d:2688)
    at SortedMap.inorderTraversal (index.cjs.js?8c4d:3139)
    at ChildrenNode.forEachChild (index.cjs.js?8c4d:3748)
    at DataSnapshot.forEach (index.cjs.js?8c4d:4336)
    at eval (Main.vue?48a8:74)
    at eval (index.cjs.js?8c4d:4551)
    at exceptionGuard (index.cjs.js?8c4d:700)

<script>
import firebase from 'firebase';
export default {
    data(){
      return{
          receieved: [],
      }
    },
    name: 'Main',
      mounted(){ 
        var detailRequestRef = firebase.database().ref("nokia_track/current_location");
        detailRequestRef.on('value', function(snapshot){
        snapshot.forEach(function(child) {
          //Retrieve Request Data
          var detailRequestData = child.val();
          console.log(detailRequestData);
          this.receieved = detailRequestData
          console.log(receieved);
         });
     });
  }
}

</script>

`

4

3 回答 3

1 
// without arrow function
mounted() { 
  const that = this;
  var detailRequestRef = firebase.database().ref("nokia_track/current_location");
  detailRequestRef.on('value', function(snapshot){
  snapshot.forEach(function(child) {
    var detailRequestData = child.val();
    that.receieved.push = detailRequestData;
  });
});


// with arrow function
mounted() { 
  var detailRequestRef = firebase.database().ref("nokia_track/current_location");
  detailRequestRef.on('value', (snapshot) => {
  snapshot.forEach(function(child) {
    var detailRequestData = child.val();
    this.receieved.push = detailRequestData
  });
});
于 2020-03-09T04:45:58.250 回答
0

这可能会起作用并且不会出错

<script>
import firebase from 'firebase';
export default {
    data(){
      return{
          receieved: [],
      }
    },
    name: 'Main',
      mounted(){ 
        var detailRequestRef = firebase.database().ref("nokia_track/current_location");
        detailRequestRef.on('value',(snapshot) => {
        snapshot.forEach(function(child) {
          //Retrieve Request Data
          var detailRequestData = child.val();
          console.log(detailRequestData);
          this.receieved = detailRequestData
          console.log(this.receieved);
         });
     });
  }
}

</script>

但我认为你要找的是：

<script>
import firebase from 'firebase';
export default {
    data(){
      return{
          receieved: [],
      }
    },
    name: 'Main',
      mounted(){ 
        var detailRequestRef = firebase.database().ref("nokia_track/current_location");
        detailRequestRef.on('value',(snapshot)=>{
        snapshot.forEach(function(child) {
          //Retrieve Request Data
          var detailRequestData = child.val();
          console.log(detailRequestData);
          this.receieved.push(detailRequestData)

         });
         console.log(this.receieved);
     });
  }
}

</script>
  1. 当您在函数内部时，您无法访问应用程序的范围，除非您使用箭头函数语法。
  2. 您想在循环时添加数据并在数组中拥有所有数据后添加到数组和输出
于 2020-03-09T04:42:01.290 回答
0

使用箭头函数代替forEach迭代器函数。因为this上下文不是 vue 组件。

detailRequestRef.on('value',(snapshot)=>{//arrow function
        snapshot.forEach((child)=>{//arrow function
          //Retrieve Request Data
          var detailRequestData = child.val();
          console.log(detailRequestData);
          this.receieved.push(detailRequestData)

         });
         console.log(receieved);
     });

或者

var self = this;//set function context to a var.
detailRequestRef.on('value',(snapshot)=>{
        snapshot.forEach(function(child) {
          //Retrieve Request Data
          var detailRequestData = child.val();
          console.log(detailRequestData);
          self.receieved.push(detailRequestData)//use it

         });
         console.log(receieved);
     });
于 2020-03-09T04:49:21.137 回答