如何在Vuejs中将项目推入数据对象的数组中? Vue似乎没有在看.push()方法 [英] How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

问题描述

我正在尝试将对象添加到在Vue实例数据对象中声明的数组中.我可以在州的购买对象中设置值，但是当我将数据推入订单队列数组时，不会填充空数组.该函数正在被触发，但数组未更新.

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 array, the empty array is not populated. The function is being triggered, but the array does not update.

这是我的表格:

<form
  v-on:submit.prevent="queuePurchase"
  class="form-inline row"
  id="order-creation-form"
  method="POST"
>

  @csrf
  <autocomplete-field
    sizing="col-xs-12 col-sm-3 col-md-3"
    name="customer"
    label="Customer"
    :data="{{ json_encode($customers) }}"
    v-on:setcustomer="setCustomer($event)"
  ></autocomplete-field>

  <div class="col-xs-12 col-sm-3 col-md3 form-group d-flex flex-column align-items-start">
    <label for="phone">Product</label>
    <select
      v-model="purchase.product"
      class="form-control w-100"
      name="product"
      aria-describedby="productHelpBlock"
      required
    >
      @foreach ($products as $product)
        <option :value="{{ json_encode($product) }}">
          {{ $product->name }}
        </option>
      @endforeach
    </select>
    <small id="productHelpBlock" class="form-text text-muted">
      Select a product
    </small>
  </div>

  <div class="col-xs-12 col-sm-3 col-md-3 form-group d-flex flex-column align-items-start">
    <label for="phone">Quantity</label>
    <input
      v-model="purchase.quantity"
      type="number"
      min="1"
      name="product"
      class="form-control w-100"
      aria-describedby="productHelpBlock"
      required
    >
    <small id="productHelpBlock" class="form-text text-muted">
      Product quantity
    </small>
  </div>

  <div class="form-group">
    <button type="submit" class="btn btn-success icon-button d-flex">
      <i class="material-icons">add</i>
      <span>&nbsp;&nbsp;  Q U E U E</span>
    </button>
  </div>
</form>

这是我的javascript:

And here is my javascript:

require("./bootstrap");
window.Vue = require("vue");

Vue.component("queue-table", require('./components/QueueTable.vue'));
Vue.component("autocomplete-field", require('./components/AutocompleteField.vue'));

const purchaseApp = new Vue({
    el: "#purchase-app",

    data() {
        return {
            queue: [],
            purchase: {
                product: null,
                customer: null,
                quantity: null
            }
        }
    },

    methods: {
        setCustomer: function(customerObj) {
            this.purchase.customer = customerObj;
        },

        queuePurchase: function() {
            this.queue.push( this.purchase );
        }
    }
});

有人可以解释一下&为什么会发生?

Could someone please explain what & why it is happening?

推荐答案

push()方法应将purchase对象添加到queue数组，但是正如@ FK82在其注释中指出的那样，push()是将多个引用添加到同一purchase对象.这意味着，如果通过增加quantity来更改对象，则每个purchase的quantity属性都将被更新.

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 = new Vue({
  name: "page",
  el: ".page",
  components: {
    "example-component": exampleComponent
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template id="example-component">
  <div>
    <p>The Queue has {{ this.queue.length }} items.</p>
    <input
      v-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>

<div class="page">
  <example-component></example-component>
</div>

而不是push()引用相同的purchase对象，请尝试使用Object.assign({}, this.purchase)或使用传播运算符创建浅表副本.这是一个使用传播运算符，然后将副本push()拷贝到queue上的示例:

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 = new Vue({
  name: "page",
  el: ".page",
  components: {
    "example-component": exampleComponent
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.min.js"></script>
<template id="example-component">
  <div>
    <p>The Queue has {{ this.queue.length }} items.</p>
    <input
      v-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>

<div class="page">
  <example-component></example-component>
</div>

这篇关于如何在Vuejs中将项目推入数据对象的数组中? Vue似乎没有在看.push()方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！