Ralat Vue.js: dijangkakan sebagai objek, tetapi sebenarnya tatasusunan, menyebabkan panjang dipaparkan sebagai tidak ditentukan

Question

Dalam apl saya, pengguna menyediakan kod gaya dalam medan input. Saya ingin menambah modal pengesahan pop timbul dengan mesej yang mengandungi bilangan kod gaya yang disediakan. Saya mempunyai perkara berikut:

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

Saya rasa bahagian pentingnya ialah ini

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

Saya tidak faham mengapa kod ini menghasilkan nombor yang tidak ditentukan berdasarkan panjang dan menunjukkan mesej kepada saya Do you want to undefined sync products?. Di dalam konsol saya ada:

[Vue warn]: Prop tidak sah: Semakan taip gagal untuk prop 'formulateValue'. Objek yang dijangkakan, mendapat tatasusunan

Bagaimana untuk menyelesaikan masalah ini?

Answer 1

Saya rasa masalahnya ialah anda menyediakan FormulateForm tatasusunan. Menurut dokumentasi, ia memerlukan objek.

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