js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Svelte documentation: adding Two-way Binding example in <sl-select> (#2327)

Browse Source 
* Documentation for Svelte #2261

* fix bracket

* Improve documentation for Svelte with clearer examples for two-way binding #2326

* revert

* Enhance Svelte documentation with clearer examples for two-way binding

---------

Co-authored-by: esaramago <emanuelsaramago@gmail.com>
This commit is contained in:
Emanuel Saramago
2025-01-02 14:56:27 +00:00
committed by GitHub
parent c16c533f42
commit 7f88bb3de8
3 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
docs/pages/frameworks/svelte.md
View File

@@ -57,10 +57,19 @@ If you'd rather not use the CDN for assets, you can create a build task that cop
One caveat is there's currently Svelte only supports `bind:value` directive in `<input>`, `<textarea>` and `<select>`, but you can still achieve two-way binding manually.
```jsx
// This doesn't work
// ❌ This doesn't work
<sl-input bind:value="name"></sl-input>
// This works, but it's a bit longer
<sl-input value={name} oninput={event => message = event.target.value}></sl-input>
<sl-select bind:value="job">
<sl-option value="designer">Designer</sl-option>
<sl-option value="developer">Developer</sl-option>
</sl-select>
// ✅ This is a bit longer, but it works
<sl-input value={name} oninput={event => name = event.target.value}></sl-input>
<sl-select value={job} onsl-change={event => job = event.target.value}>
<sl-option value="designer">Designer</sl-option>
<sl-option value="developer">Developer</sl-option>
</sl-select>
```
:::tip

4
docs/pages/frameworks/vue-2.md
View File

@@ -67,9 +67,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
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 -->
<!-- ❌ This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<!-- ✅ This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```

4
docs/pages/frameworks/vue.md
View File

@@ -100,9 +100,9 @@ When binding complex data such as objects and arrays, use the `.prop` modifier t
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 -->
<!-- ❌ This doesn't work -->
<sl-input v-model="name"></sl-input>
<!-- This works, but it's a bit longer -->
<!-- ✅ This works, but it's a bit longer -->
<sl-input :value="name" @input="name = $event.target.value"></sl-input>
```