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