vue.js显示了不确定的长度,带有错误预期对象,获取数组
在我的应用程序中,用户在输入字段中提供样式代码。我想添加弹出确认模式,该模式将包含包含提供的样式代码数量的消息。我已经在下面有:
<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?`
我不明白的一个,为什么此代码从长度上产生不确定的数字,并向我展示消息您想未定义的同步产品吗?
。在控制台内,我得到了:
[vue warn]:无效的道具:类型检查失败的“ formulateValue”。预期对象,有数组
如何解决?
In my app user provides style codes inside input field. I want to add popup confirmation modal which will have message containing the number of provided style codes. I've got below:
<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>
I think the crucial part is that one
methods: {
async syncProducts() {
let confirmationText = `Do you want to ${this.productsToSyncAmount} sync products?`
I don't get it why this code produces undefined number from length and show me message Do you want to undefined sync products?
. Inside the console I've got:
[Vue warn]: Invalid prop: type check failed for prop "formulateValue". Expected Object, got Array
How to fix that?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
我认为问题是您将数组提供给
formulateForm
。根据文档,它期望一个对象。
https://vueformate.com/guide/guide/guide/forms/#setting-initting-initial-values-values < /a>
I think the problem is that you provide an array to
FormulateForm
.According to the docs it expects an object.
https://vueformulate.com/guide/forms/#setting-initial-values