I have an app where users input style codes into a field. I want to create a popup confirmation modal that displays a message with the number of style codes provided. The code I currently have is:
<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('', 'Please type product codes for sync first!', '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>
The problematic piece seems to be this part:
methods: {
async syncProducts() {
let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`
I'm not sure why this code is giving me an undefined number and displaying the message
Do you want to undefined sync products?[Vue warn]: Invalid prop: type check failed for prop "formulateValue". Expected Object, got Array
Any suggestions on how to resolve this issue?