How Do I Push Items Into An Array In The Data Object In Vuejs? Vue Seems Not To Be Watching The .push() Method

I am attempting to add objects into an array I declared in Vue instance data object. I can set the values in the state's purchase object, but when I push data into the orders queue

Solution 1:

The push() method ought to add purchase objects to the queue array, but as @FK82 pointed out in his comment, push() is adding multiple references to the same purchase object. This means that if you change the object by increasing the quantity, every purchase's quantity property will be updated.

You can give that a try here:

const exampleComponent = Vue.component("example-component", {
  name: "exampleComponent",
  template: "#example-component",
  data() {
    return {
      queue: [],
      purchase: {
        product: null,
        customer: null,
        quantity: null
      }
    };
  },
  methods: {
    queuePurchase() {
      this.queue.push( this.purchase );
    }
  }
});

const page = newVue({
  name: "page",
  el: ".page",
  components: {
    "example-component": exampleComponent
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script><templateid="example-component"><div><p>The Queue has {{ this.queue.length }} items.</p><inputv-model="purchase.quantity"type="number"min="1"name="product"placeholder="Quantity"
    ><button @click="queuePurchase">
      Add to Queue
    </button><pre>{{ JSON.stringify(this.queue, null, 2) }}</pre></div></template><divclass="page"><example-component></example-component></div>

Instead of push()ing a reference to the same purchase object, try creating a shallow copy with Object.assign({}, this.purchase) or by using the spread operator. Here's an example that uses the spread operator and then push()es the copy onto the queue:

const exampleComponent = Vue.component("example-component", {
  name: "exampleComponent",
  template: "#example-component",
  data() {
    return {
      queue: [],
      purchase: {
        product: null,
        customer: null,
        quantity: null
      }
    };
  },
  methods: {
    queuePurchase() {
      this.queue.push({...this.purchase});
    }
  }
});

const page = newVue({
  name: "page",
  el: ".page",
  components: {
    "example-component": exampleComponent
  }
});

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script><templateid="example-component"><div><p>The Queue has {{ this.queue.length }} items.</p><inputv-model="purchase.quantity"type="number"min="1"name="product"placeholder="Quantity"
    ><button @click="queuePurchase">
      Add to Queue
    </button><pre>{{ JSON.stringify(this.queue, null, 2) }}</pre></div></template><divclass="page"><example-component></example-component></div>