Vue.js-Fehler: Es wird erwartet, dass es sich um ein Objekt handelt, in Wirklichkeit aber um ein Array, wodurch die Länge als undefiniert angezeigt wird

Question

In meiner App gibt der Benutzer Stilcode in einem Eingabefeld ein. Ich möchte ein Popup-Bestätigungsmodal mit einer Nachricht hinzufügen, die die Anzahl der bereitgestellten Stilcodes enthält. Ich habe Folgendes:

<template>

<h4>Style number</h4>
<FormulateForm v-model="styleCodes">
      <FormulateInput
      name="product_codes"
      placeholder="Style number"
      />

      <button
        type="button"
        class="btn btn-primary"
        @click="syncProducts"
      >
        Sync
      </button>
</FormulateForm>

</template>

<script>

export default {
  name: 'SyncProducts',
  data() {
    return {
      styleCodes: [],
    }
  },
  computed: {
    productsToSyncAmount () {
      return this.styleCodes.length
    },
  methods: {
    async syncProducts() {
      let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`

      if (this.productsToSyncAmount === 0) {
        ModalController.showToast('', 'Type product codes for sync first, please!', 'warning')
      }
      else if (await ModalController.showConfirmation('Confirmation', confirmationText)) {
        try {
          ModalController.showLoader()
          await createApparelMagicProductsRequest(this, this.styleCodes)
        } catch (data) {
          const errorMessage = `Error occurred during queueing products to sync - `
          ModalController.showToast('', errorMessage + data?.message, 'error')
        } finally {
          this.styleCodes = []
        }
      }
    },
  }
}
</script>

Ich denke, der entscheidende Teil ist dieser

methods: {
    async syncProducts() {
      let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`

Ich verstehe nicht, warum dieser Code basierend auf der Länge undefinierte Zahlen generiert und mir die Meldung anzeigt Do you want to undefined sync products?. In der Konsole habe ich:

[Vue-Warnung]: Ungültige Requisite: Typprüfung für Requisite „formulateValue“ fehlgeschlagen. Objekt erwartet, Array erhalten

Wie kann dieses Problem gelöst werden?

Answer 1

我认为问题在于您向 FormulateForm 提供了一个数组。 根据文档，它需要一个对象。

https://vueformulate.com/guide/forms/#setting-initial -值