Skip to content

Commit

Permalink
small tweaks to defineModel
Browse files Browse the repository at this point in the history
  • Loading branch information
yyx990803 committed Dec 29, 2023
1 parent 9d7f313 commit 2c721b7
Showing 1 changed file with 6 additions and 4 deletions.
10 changes: 6 additions & 4 deletions src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,12 +235,12 @@ Under the hood, this macro declares a model prop and a corresponding value updat

```js
// declares "modelValue" prop, consumed by parent via v-model
const modelValue = defineModel()
const model = defineModel()
// OR: declares "modelValue" prop with options
const modelValue = defineModel({ type: String })
const model = defineModel({ type: String })

// emits "update:modelValue" when mutated
modelValue.value = 'hello'
model.value = 'hello'

// declares "count" prop, consumed by parent via v-model:count
const count = defineModel('count')
Expand All @@ -266,15 +266,17 @@ if (modelModifiers.trim) {
}
```

Usually, we need to conditionally transform the value read from or synced back to the parent when a modifier is present. We can achieve this via the `get` and `set` transformer options:
When a modifier is present, we likely need to transform the value when reading or syncing it back to the parent. We can achieve this by using the `get` and `set` transformer options:

```js
const [modelValue, modelModifiers] = defineModel({
// get() omitted as it is not needed here
set(value) {
// if the .trim modifier is used, return trimmed value
if (modelModifiers.trim) {
return value.trim()
}
// otherwise, return the value as-is
return value
}
})
Expand Down

0 comments on commit 2c721b7

Please sign in to comment.