vueJsのfirebaseバインドされた配列の要素を更新する

Question

私はこれを持っていますオーダーの配列と内側のdivの順序で、私はそれが持っているステータスをチェックします。 beforeCreate:で

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

私はfirebase参照して、この配列をバインドさ：問題は、私が一緒に注文状況に配列変更の最後の要素を変更するたびにあり、それは起こるべきではありません

this.$bindAsArray('orders', database.ref('orders/' + user.uid).orderByChild('hourOrder')) 

。ここで

は私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:機能である：

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

     }) 
     } 

    }, 

Answer 1

私は計算されたプロパティを使用して、この動作を回避する方法を発見：

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

私は」計算されたプロパティに配列を再びバインドしました注文には常に正しい値があります。

私は、変更があるたびに注文配列を再度修正しているため、パフォーマンスの低下が懸念されます。