konstaui / konsta

Mobile UI components made with Tailwind CSS
https://konstaui.com
MIT License
3.52k stars 131 forks source link

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

Open Quin452 opened 2 years ago

Quin452 commented 2 years ago

Check that this is really a bug

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

Would you like to open a PR for this bug?

mortegro commented 2 years ago

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 commented 1 year ago

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

image

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

opuu commented 1 year ago

This should be supported natively.

JonatanGk commented 1 year ago

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.