Javascript 更新vueJs上firebase绑定数组上的元素

我有一个订单数组，在内部div订单上，我检查它的状态

<div class="list-group" v-for="(order, key) in orders">
 <div class="order" v-if="checkOrderStatus(order.status)">
      <div class="dishes">
        <ul id="dishes" v-for="dish in order.dishes" >
          <li v-if="checkDishOnOrder(dish)">{{checkDishOnOrder(dish).quantity}} x {{checkDishOnOrder(dish).dishName}}</li>
        </ul>
      </div>
      <div class="notInclude">
        <ul id="notInclude" v-for="dish in order.dishes" >
          <li v-if="checkForNotInclude(dish)">{{checkForNotInclude(dish)}}</li>
        </ul>
      </div>
      <div class="table">
          <center><span id="table">{{order.tableID}}</span></center>
      </div>
      <div class="hour">
          <center><span id="hour">{{order.hour}}</span></center>
      </div>
      <div class="status">
          <center><button type="button" id="status" :class="{'doingOrder' : order.status == 'Pedido pronto', 'orderDone' : order.status == 'Pronto para entrega'}" @click="changeStatus(order)">{{order.status}}</button></center>
      </div>

    </div>
  </div>

问题是，每次我更改订单状态时，数组的最后一个元素都会一起更改，而这不应该发生

这是我的

checkOrderStatus:

函数：

checkOrderStatus: function(orderStatus) {
      if(this.orderType == 'Em andamento') {
        if(orderStatus != "Pronto para entrega") {
          return true
        }
      } else if (this.orderType == 'Pedidos feitos') {
        if(orderStatus == "Pronto para entrega") {
          return true
        }
      }

    },

changeStatus: function(order) {
      var that = this;
      var database = Firebase.database();
      var loggedUser = Firebase.auth().currentUser;

      if (order.status == 'Em andamento') {
        order.status = 'Pedido pronto';

        var orderKey = order['.key'];
        delete order['.key'];

        var updates = {};
        updates['orders/' + loggedUser.uid + '/'+ orderKey] = order;

        database.ref().update(updates).then(function() {
          console.log('order Updated');

        })
      }
      else if(order.status == 'Pedido pronto') {
        order.status = 'Pronto para entrega';

        var orderKey = order['.key'];
        delete order['.key'];

        var updates = {};
        updates['orders/' + loggedUser.uid + '/'+ orderKey] = order;

        database.ref().update(updates).then(function() {
          console.log('order Updated');

        })
      }

    },

以下是

changeStatus:

函数：

checkOrderStatus: function(orderStatus) {
      if(this.orderType == 'Em andamento') {
        if(orderStatus != "Pronto para entrega") {
          return true
        }
      } else if (this.orderType == 'Pedidos feitos') {
        if(orderStatus == "Pronto para entrega") {
          return true
        }
      }

    },

changeStatus: function(order) {
      var that = this;
      var database = Firebase.database();
      var loggedUser = Firebase.auth().currentUser;

      if (order.status == 'Em andamento') {
        order.status = 'Pedido pronto';

        var orderKey = order['.key'];
        delete order['.key'];

        var updates = {};
        updates['orders/' + loggedUser.uid + '/'+ orderKey] = order;

        database.ref().update(updates).then(function() {
          console.log('order Updated');

        })
      }
      else if(order.status == 'Pedido pronto') {
        order.status = 'Pronto para entrega';

        var orderKey = order['.key'];
        delete order['.key'];

        var updates = {};
        updates['orders/' + loggedUser.uid + '/'+ orderKey] = order;

        database.ref().update(updates).then(function() {
          console.log('order Updated');

        })
      }

    },

---

我找到了一种使用计算属性避免这种行为的方法：

computed: {
  fixedOrders() {
    var database = Firebase.database();
    this.$bindAsArray('orders', database.ref('orders/' + this.userID).orderByChild('hourOrder'))
    return this.orders
  },
}

我将数组再次绑定到一个计算属性上，这样它总是具有正确的订单值

---

我只是担心性能损失，因为每次更改订单阵列时，我都会再次对其进行投标。

您能否显示更改订单状态的部分，因为这显然是问题所在？对不起，我忘了。