vue.js显示了不确定的长度,带有错误预期对象,获取数组

发布于 2025-02-01 19:18:07 字数 1811 浏览 0 评论 0原文

在我的应用程序中,用户在输入字段中提供样式代码。我想添加弹出确认模式,该模式将包含包含提供的样式代码数量的消息。我已经在下面有:

<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技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

梦途 2025-02-08 19:18:07

我认为问题是您将数组提供给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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文