如何将数据从 vue.js 中的挂载函数传递到数据函数内部的数组

Question

我正在尝试将数据传递到数据函数内部的接收数组我正在从 firebase 获取数据并想在 vue 中显示 table 但它显示错误

未捕获类型错误：无法设置未定义的属性 'receieved' 谁能帮我怎么做？提前致谢

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>

`

Answer 1

这可能会工作并且不会出错

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

当你在一个函数中时，你不能访问应用程序的范围，除非你使用箭头函数语法。
你想在遍历的时候添加数据，在数组中有所有数据后添加到数组中输出

Answer 2

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

Answer 3

使用箭头函数代替 forEach 迭代器函数。因为thiscontext不是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);
     });

如何将数据从 vue.js 中的挂载函数传递到数据函数内部的数组

How to pass data to an array that is inside data function from mounted function in vue.js

vue.js

firebase-realtime-database

vue-directives

vuejs3