add two-way binding info back

pull/1722/head
Cory LaViska 2023-11-13 15:56:23 -05:00
rodzic 2a1f48c332
commit e0701fe3fc
1 zmienionych plików z 13 dodań i 0 usunięć

Wyświetl plik

@ -107,6 +107,19 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
<sl-color-picker :swatches.prop="mySwatches" />
```
### Two-way Binding
One caveat is there's currently [no support for v-model on custom elements](https://github.com/vuejs/vue/issues/7830), but you can still achieve two-way binding manually.
```html
<!-- This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```
If that's too verbose for your liking, you can use a custom directive instead. [This utility](https://www.npmjs.com/package/@shoelace-style/vue-sl-model) adds a custom directive that will work just like `v-model` but for Shoelace components.
:::tip
Are you using Shoelace with Vue? [Help us improve this page!](https://github.com/shoelace-style/shoelace/blob/next/docs/frameworks/vue.md)
:::