Updating element on firebase binded array on vueJs

Question

I have this Orders array and on the inner div order, I check which status it has.

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

On the beforeCreate: I binded this array with a firebase ref:

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

The problem is, every time I change a order status the last element of the array changes together and it should not happen.

Here is my checkOrderStatus: function:

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

    },

Here is changeStatus: function:

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

        })
      }

    },

Can you show the part where you change the order status, since that is apparently where the problem is? — Daniel Beck
– Daniel Beck, Commented May 23, 2017 at 15:16

Raul Marques · Accepted Answer · 2017-05-24 12:22:24Z

1

I found a way to avoid this behavior using computed properties:

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

I've binded the array again on a computed property, so that way it always have the right values for orders.

I'm just concerned about the performance loss because I'm biding the orders array again every time it changes.

answered May 24, 2017 at 12:22

Raul Marques

3552 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Updating element on firebase binded array on vueJs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related