---
metaTitle: ModelEdit component | AwesCode UI
meta:
  - name: description
    content: The <AwModelEdit /> component provides inline model editing - UI Vue component for AwesCode UI.
title: ModelEdit
---

# AwModelEdit

**Category:** Organism | **Import:** Dynamic

The `AwModelEdit` component provides inline editing functionality for model data with save/cancel actions.

## Usage

### Basic Example

```markup
<AwModelEdit
  v-model="user.name"
  :url="`/api/users/${user.id}`"
  field="name"
  @saved="handleSaved"
>
  {{ user.name }}
</AwModelEdit>
```

### With Loading State

When loading initial data, use `AwContentPlaceholder`:

```markup
<template>
  <AwContentPlaceholder v-if="user.fetching" type="form" :lines="1" />

  <AwModelEdit
    v-else
    v-model="user.name"
    :url="`/api/users/${user.id}`"
    field="name"
    @saved="handleSaved"
  >
    {{ user.name }}
  </AwModelEdit>
</template>
```

## API

### Props

| Name | Description | Type | Required | Default |
|------|-------------|------|----------|---------|
| value | Model value (v-model) | `Any` | `false` | `null` |
| url | Save endpoint URL | `String` | `true` | - |
| field | Field name to update | `String` | `true` | - |
| method | HTTP method | `String` | `false` | `'patch'` |

### Events

| Name | Payload | Description |
|------|---------|-------------|
| input | `value` | Value changed (v-model) |
| saved | `response` | Save successful |
| error | `error` | Save failed |

## Notes

- **Import Method:** Dynamic - Component is loaded on-demand as organism
- Click to edit inline
- Automatically saves on blur
- Shows loading state during save