Open vmisiko opened 2 years ago
@vmisiko sorry for the delayed response. Can I please ask you to provide your Collect.js config so we can try to reproduce it on our end?
Facing same issue Current Behavior I am installing it in my vue 3 Ui library, but it does not submit the input fields
Context This has hindered me from submitting the form, it can certainly perform validation of the inputs fields but on submission it does not go through.
Your Environment Version used: 2.12.0 Collect.JS config -0.6.0 Browser Name and version: Google Chrome Operating System and version (desktop or mobile): Windows 10
@venkateshvegi Hi. On our side for version 2.12.0 no errors for Vue3 ui library. Can I ask you to show your collects config and we can try to reproduce it on our end?
@AnnaKudriasheva @dashkovgs What all do you need in my collect config? Here are some of the details @vgs/collect-js: ^0.6.1 quasar: ^2.0.0",
adding following to my .vue file import { loadVGSCollect } from '@vgs/collect-js'
const collect = await loadVGSCollect({
tenantId: 'tntsfeqzp4a',
environment: 'sandbox',
version: '2.18.0',
}).catch((e) => {})
I have to update tenantId to vaultId as I get console error stating vaultId is required
baFieldSettings: { type: 'number', name: 'accountNumber', successColor: '#000', errorColor: '#D8000C', placeholder: 'Add Account Number', validations: ['required', '/^[0-9]*$/'], css: { 'height': '50px', 'width': '100%', 'font-size': '16px', 'margin': '0px', 'box-sizing': 'border-box', 'font-family': '"Open Sans", sans-serif', 'background-clip': 'padding-box', 'border': '1px solid #CCCCCC', 'border-radius': '3.333px', 'padding': '2.5px 6.66px', 'transition': 'border-color 0.15s ease-in-out,box-shadow 0.15s ease-in-out,-webkit-box-shadow 0.15s ease-in-out', '::placeholder': { 'line-height': '1' }, '::-webkit-inner-spin-button': { '-webkit-appearance': 'none', 'margin': '0', }, '&:focus': { 'color': '#5c6873', 'background-color': '#fff', 'border-color': '#8ad4ee', 'outline': '0', }, } }
vgsForm.field("#accountNumber", baFieldSettings)
And I see the following error as I render the vgsField
@venkateshvegi our team after investigation found an issue related on Vue3 state (Proxy
), WeakMap
structure and private fields/methods in collect library.
The Proxy
can not expose the private fields of instance.
But in this case we can use toRaw method to transform Proxy
to Object
.
Demo example: (https://stackblitz.com/edit/vue-lqvqw8?file=src%2FApp.vue,src%2Fvgs%2FVGS.vue)
@vmisiko please let us know if the workaround above helps you while we're working on the fix. Thank you!
@dashkovgs @AnnaKudriasheva I was having the same issue (h is not a function
) in a Vue 3 app and the workaround via toRaw()
fixed the issue for me. Thanks.
Current Behavior
I am installing it in my vue Ui library, but it does not submit the input fields
Context
This has hindered me from submitting the form, it can certainly perform validation of the inputs fields but on submission it does not go through.
Your Environment