如何使用 vuejs 在方法中更改数组 [重复]

Question

我可以使用以下代码更改数组。

new Vue({
  el: '#app',
  data: {
    students: [
      {name: "derek"},
      {name: "frank"}
    ],
  },
  methods: {
    changeStudents: function() {
      this.students = [
        {name: "aa"},
        {name: "bb"}
      ];
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <button @click="changeStudents">Click Me</button>
  <p v-for="student in students">{{student.name}}</p>
</div>

但是当我尝试在 Google Firebase 方法中更改数组时，它不起作用。由于某种原因，它不知道this.students 可用。 this.students 应该可以通过任何方法访问，至少我认为。这可能是指针问题还是类似的问题？

new Vue({
  el: '#app',
  data: {
    students: [
      {name: "derek"},
      {name: "frank"}
    ],
  },
  methods: {
    changeStudents: function() {
      
      var newStudents = [];
      
      // Get the students from the database
      studentsCol.get().then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
          var student = doc.data();
          newStudents.push(student);
          
          // line below doesn't work because it doesn't know this.students
          // this.students.push(student);
          }
        });
      });
      // doesn't work either
      this.students = newStudents;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app">
  <button @click="changeStudents">Click Me</button>
  <p v-for="student in students">{{student.name}}</p>
</div>

Answer 1

使用箭头函数，因为它们使用父级的词法范围，在这种情况下是 changeStudents 函数的范围，因此“this”指的是组件实例，然后学生数据属性可用。

studentsCol.get().then((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          var student = doc.data();
          newStudents.push(student);

          // line below doesn't work because it doesn't know this.students
          // this.students.push(student);
          }
        });
      });

forEach 循环设置自己的上下文，然后“this”被覆盖，箭头函数解决了这个问题。但是，如果您不想使用箭头函数，可以将上下文传递给 forEach 循环，如下所示：

array.forEach(function(param) {
  // code
}, this);