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

如何使用vuejs更改方法中的数组

1 个答案: