Vuejs의 데이터 객체에 있는 어레이에 항목을 푸시하려면 어떻게 해야 합니까?Vue가 .push() 메서드를 감시하고 있지 않은 것 같습니다.

Vuejs의 데이터 객체에 있는 어레이에 항목을 푸시하려면 어떻게 해야 합니까?Vue가 .push() 메서드를 감시하고 있지 않은 것 같습니다.

Vue 인스턴스 데이터 개체에서 선언한 어레이에 개체를 추가하려고 합니다.주의 구매 개체에서 값을 설정할 수 있지만 데이터를 주문 대기열 배열에 푸시하면 빈 배열이 채워지지 않습니다.함수가 트리거되고 있지만 어레이가 업데이트되지 않습니다.

제 양식은 다음과 같습니다.

<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가 있다.

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

왜 무슨 일이 일어나고 있는지 설명해 주실 수 있나요?

그push()방법은 추가되어야 한다.purchase에 대한 반대queue하지만 @FK82가 지적했듯이push()여러 개의 참조를 같은 에 추가합니다.purchase물건.즉, 오브젝트를 변경함으로써quantity,모든purchase의quantity속성이 업데이트됩니다.

여기서 시험해 보세요.

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:

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>

언급URL : https://stackoverflow.com/questions/52235847/how-do-i-push-items-into-an-array-in-the-data-object-in-vuejs-vue-seems-not-to