Inline Edit

An inline Input component that allows the user to edit a value in place.

Basic usage

InlineEdit essentially wraps an Input and allow that attributes fall through to it.

  <InlineEdit v-model="currentValue" />

Comparison

The InlineEdit component allows a previous value to be informed via the oldValue property so it can be compared against.

10

  <InlineEdit :old-value="oldValue" v-model="currentValue" />

current value	old value
0	10

INFO

If the input is left empty, oldValue will be emitted, and it will hide the comparison.

Formatting

InlineEdit can handle the oldValue formatting by assigning either percent or currency to the format property.

Percent

%

10%

<InlineEdit :old-value="oldValue" v-model="currentValue" format="percent">
  <template #append>%</template>
</InlineEdit>

Currency

$

$10.00

<InlineEdit :old-value="oldValue" v-model="currentValue" format="currency">
  <template #prepend>$</template>
</InlineEdit>

Hint text

hint

10

  <InlineEdit hint-text="hint" :old-value="oldValue" v-model="currentValue" />

Error text

error

10

  <InlineEdit error-text="error" :old-value="oldValue" v-model="currentValue" />

Label and Placeholder

THC

  <InlineEdit label="THC" placeholder="0%"  />

Disabled

<InlineEdit disabled />

API

See the documentation below for a complete reference to all the props and classes available to the components mentioned here.

• InlineEdit