How to use form values in Vue using K-List-Input

[Quin452]

Check that this is really a bug

• I confirm

Reproduction link

Form, but no submission

Bug description

I am able to get the values of inputs by using the v-model field for "normal" HTML.

However, using Konsta, I cannot get the value of the input.
I have tried value, :value and v-model but none of them seem to work.

If I hard-code the value, value="Something", that does work, but I am unable to edit.

Expected Behavior

Be able to get the value.

Actual Behavior

By adding @change = "e => [variable] = e.target.value" to it, this seems to allow the value to be used/updated.

Konsta UI version

0.11.1 (in package.json) - but recently added (v 1.0 +?)

Platform/Target and Browser Versions

Windows 10, Firefox Developers Edition 106.0b4

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• Make sure this is a Konsta UI issue and not a framework-specific issue

Would you like to open a PR for this bug?

• I'm willing to open a PR

[mortegro]

I had the same problem and tried to improve that in #90, but I am only a beginner so i am not sure if this solution has negative side-effects.

In the meantime using :value="someVar" in conjunction with @input="e => someVar=e.target.value" is working for me.

A more verbose way is shown in the FormInputs page of the kitchen-sink app (name and demoValue).

[xolider]

As a workaround, I wrote the following wrapper component for k-list-input and this is working fine.
Pay attention: this is written with Vue 3 and TypeScript

then, just use <k-list-input-wrapper v-model="myVar"></k-list-input-wrapper> (or whatever you called your component to)

[opuu]

This should be supported natively.

[JonatanGk]

I have the same issue with v-model / value. I think its not supported or bug. IMHO I think like @opuu "this should be supported natively.

<k-list-input floating-label type="text" :value="modelValue" @input="modelValue = $event.target.value" >

I have used this as a workaround to continue using the KonstaUi components.