Editable form elements for vue js 3
Editable input
Available props
value -> value of input
type -> type of input
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
Example
<editable-input
:default-show-input=true
value="editable value"
name="price"
/>Editable select
Available props
value -> value of input
options -> Select options object
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
Example
<editable-select
value="SK"
:default-show-input=false
:options="{SK:'Slovakia',CZ:'Czech republic',PL:'Poland'}"
name="price"
/>Editable textarea
Available props
value -> value of input
name -> name of input send in posted event
empty-value -> Custom value (string) to show when no `value` prop is set
show-input -> Boolean value, whether to show value or input on load
rows -> columns of textarea
cols -> rows of textarea
maxLength -> Max lenght of string
Example
<editable-textarea value="This is text in textarea" name="text-input"/>Editable checkbox
Available props
value -> value of input
options -> checkbox options with two values
name -> name of input send in posted event
show-input -> Boolean value, whether to show value or input on load
Example
<editable-checkbox :value=false>
<template #inputs>
<input type="hidden" value="hello">
</template>
</editable-checkbox>