Wie kann ich push-Elemente in einem array in das Daten-Objekt in Vuejs? Vue scheint Sie nicht zu sehen .push () - Methode

Ich bin versucht, fügen Sie Objekte in ein array erklärte ich in Vue-Instanz Daten-Objekt. Ich kann die Werte in den staatlichen Kauf-Objekt, aber wenn ich den push-Daten in die Aufträge Warteschlange array, das leere array nicht gefüllt. Die Funktion wird ausgelöst, aber das array nicht aktualisieren.

Hier ist mein Fragebogen:

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

Und hier ist mein 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 );
        }
    }
});

Könnte mir bitte jemand erklären, was & warum ist es passiert?

  • Lesen Sie über die Reaktivität in vue hier vuejs.org/v2/guide/list.html#Caveats
  • erfasst werden sollten nach diesem vuejs.org/v2/guide/list.html#Mutation-Methods
  • Sollte dies funktionieren. Sie wahrscheinlich wollen, kopieren Sie die purchase Objekte, obwohl, bevor Sie schieben Sie Sie, um queue. Objekte sind Referenz-Typen. Also, die Warteschlange wird immer store die gleiche Referenz haben (die Punkte für this.purchase).
  • wo sehen Sie die Anzeige der Warteschlange ?
  • Sie gesetzt hatte :data="{{ json_encode($customers) }}" ich denke, Sie kann das nicht tun, wahrscheinlich kann man tun :customers="{{ json_encode($customers) }}" und in Ihrer Daten-Objekt setzen ` Daten() { return {- Kunden :[] ...`
InformationsquelleAutor Howard Mkongo | 2018-09-08
  1. 6

    Den push() Methode sollte hinzufügen purchase Objekte der queue array, aber wie @FK82 wies darauf hin, in seinem Kommentar push() ist das hinzufügen mehrere Verweise auf die gleiche purchase Objekt. Dies bedeutet, dass, wenn Sie ein anderes Objekt durch die Erhöhung der quantity jeder purchase's quantity - Eigenschaft aktualisiert wird.

    Können Sie geben, dass ein Versuch hier:

    JS:

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

    HTML:

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

    Statt push()ing eine Referenz auf die gleiche purchase Objekt, versuchen Sie, erstellen eine flache Kopie mit Object.assign({}, this.purchase) oder durch die Verwendung der spread-operator. Hier ist ein Beispiel für die Verwendung der spread-operator und dann push()es die Kopie auf der queue:

    JS:

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

    HTML:

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

    InformationsquelleAutor Travis Hohl
Schreibe einen Kommentar