简体   繁体   English

如何在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

I am attempting to add objects into an array I declared in Vue instance data object. 我试图将对象添加到在Vue实例数据对象中声明的数组中。 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. 该函数正在被触发,但是数组未更新。

Here is my form: 这是我的表格:

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

And here is my javascript: 这是我的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? 有人可以解释一下发生的原因吗?

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. push()方法应该将purchase对象添加到queue数组,但是正如@ FK82在他的评论中指出的那样, push()正在向同一purchase对象添加多个引用。 This means that if you change the object by increasing the quantity , every purchase 's quantity property will be updated. 这意味着,如果您通过增加quantity更改对象,则每个purchasequantity属性将被更新。

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> 

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. 与其使用push()引用对同一purchase对象的引用Object.assign({}, this.purchase)尝试使用Object.assign({}, this.purchase)或使用散布运算符创建浅表副本。 Here's an example that uses the spread operator and then push() es the copy onto the queue : 这是一个使用spread运算符,然后push()副本push() es放入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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM