Erreur Vue.js : censé être un objet, mais en fait un tableau, ce qui entraîne l'affichage de la longueur comme indéfinie

Question

Dans mon application, l'utilisateur fournit un code de style dans un champ de saisie. Je souhaite ajouter un modal de confirmation contextuel avec un message contenant le nombre de codes de style fournis. J'ai ce qui suit :

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

Je pense que l'élément clé est ceci

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

Je ne comprends pas pourquoi ce code génère des nombres indéfinis en fonction de la longueur et me montre le message Do you want to undefined sync products?. A l'intérieur de la console j'ai :

[Vue warn] : accessoire non valide : échec de la vérification du type pour l'accessoire 'formulateValue'. Objet attendu, tableau obtenu

Comment résoudre ce problème ?

Answer 1

Je pense que le problème est que vous fournissez FormulateForm un tableau. Selon la documentation, cela nécessite un objet.

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