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> 

은 내가 중포 기지 심판으로이 배열을 바인더 제본 : 문제는

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

은, 때마다 나는 배열의 마지막 요소가 함께 변경하는 주문 상태를 변경하고 일이 안 . 나는 '

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

:

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

내가 계산 속성을 사용하여이 문제를 방지하는 방법을 발견 : 여기

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: 기능입니다 : 여기

내 checkOrderStatus: 기능입니다 계산 된 속성에 배열을 다시 바인딩 했으므로 주문에 대해 항상 올바른 값을가집니다.

나는 성능 배열이 변경 될 때마다 주문 배열을 다시 바비팅하기 때문에 성능 손실이 걱정됩니다.