Vue.js報錯：預期為對象，實際為數組，導致長度顯示為undefined

Question

在我的應用程式中，使用者在輸入欄位內提供樣式代碼。我想新增彈出確認模式，其中包含包含提供的樣式代碼數量的訊息。我有以下內容：

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

我認為關鍵的部分是這個

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

我不明白為什麼這段程式碼會根據長度產生未定義的數字並向我顯示訊息 Do you want to undefined sync products?。在控制台內我有：

[Vue warn]：無效的道具：道具「formulateValue」的型別檢查失敗。期望的對象，得到數組

如何解決這個問題？

Answer 1

我認為問題在於您向 FormulateForm 提供了一個陣列。 根據文檔，它需要一個物件。

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