Question

如何将数据从 vue.js 中的已安装函数传递到数据函数内部的数组

2020-03-09

395

vue.js firebase-realtime-database vue-directives vuejs3

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

未捕获的 TypeError：无法设置未定义的属性“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

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

使用箭头函数代替 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);
     });

Answer 3

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

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

当您在函数内部时，除非使用箭头函数语法，否则您无法访问应用程序的范围。
您希望在循环时添加数据，并在数组中包含所有数据后将其添加到数组并输出