Comments (8)
How would you handle radio buttons? Knockout has something like this:
<label><input type="radio" value="Alpha" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
<label><input type="radio" value="Beta" data-bind="checked: radioSelectedOptionValue" />Beta</label>
<label><input type="radio" value="Gamma" data-bind="checked: radioSelectedOptionValue" />Gamma</label>
(source)
from svelte.
I would suggest setting up click event handlers on each radio button. Then have a method to be used as an event callback, sending the input element to the event callback. Bellow is an example of this.
<label><input type="radio" name="signs" on:click="select({input: this})" value="Alpha"> Alpha</label>
<label><input type="radio" name="signs" on:click="select({input: this})" value="Beta"> Beta</label>
<label><input type="radio" name="signs" on:click="select({input: this})" value="Gamma"> Gamma</label>
<script>
export default {
data() {
return {};
},
methods: {
select({ input }) {
if(input.checked) {
// do something with the selected value
// example: trigger a component event
this.fire('select', { value: input.value });
}
}
}
};
</script>
I know it might be confusing having a method called select
and triggering an event select
. Just know that they're two different things. You could listen for the select event on the component and do some action with it.
import RadioButtons from './RadioButtons.js';
var radioButtons = new RadioButtons({
target: document.querySelector('.radios')
});
radioButtons.on('select', function({ value }) {
console.log('Selected radio button value is', value);
});
EDIT: If all you wanted to do with the radio buttons is trigger a component event you can remove the select method all together.
<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Alpha"> Alpha</label>
<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Beta"> Beta</label>
<label><input type="radio" name="signs" on:click="fire('select', {value: this.value})" value="Gamma"> Gamma</label>
<script>
export default {
data() {
return {};
}
};
</script>
from svelte.
That's not two-way binding, it's just MVC.
from svelte.
@timdp You're right. There isn't any two-way bindings for radio button inputs. They're not supported at this time.
from svelte.
Well, my question was more about how they will be supported, since that's what this issue is about. 😄
from svelte.
You could create your own radio input component. I've played around with an idea of a <RadioGroup />
component. I have not built or tested this yet. It's just an idea, I might give it a go and report back.
RadioGroup.html
{{#if radios}}
{{#each radios as radio}}
<label>
<input type="radio" name="{{groupName}}" value="{{radio.value}}" on:click="select({radio: this})">
{{radio.label}}
</label>
{{/each}}
{{/if}}
<script>
export default {
data() {
return {
value: '',
group: 'group',
radios: []
};
},
methods: {
select({ radio }) {
if(radio.checked) {
// Sets the value property equal to the selected radios value
this.set({value, radio.value});
}
}
}
}
</script>
App.js
<!--
sets up a two-way binding between the RadioGroup components internal `value`
property and the App components `selectedRadioValue` property
Source: https://svelte.technology/guide#nested-components
-->
<RadioGroup value="{{selectedRadioValue}}" group="signs" radios=signRadios />
<script>
import RadioGroup from './RadioGroup.js';
export default {
data() {
return {
selectedRadioValue: '',
signRadios: [
{
label: 'Alpha',
value: 'Alpha'
},
{
label: 'Beta',
value: 'Beta'
},
{
label: 'Gamma',
value: 'Gamma'
}
]
};
}
};
</script>
from svelte.
How about binding and requiring a name for the checkboxes/radios? Then we can use the name to indicate which one is selected.
from svelte.
I'm opening individual issues for different two-way binding cases. Particularly keen to hear feedback on #311 as it pertains to the discussion above. Will close this issue in favour of the new ones. Thanks!
from svelte.
Related Issues (20)
- HMR fails on next.179 and above HOT 8
- 🪲 sveltekit PROD bug with [email protected] using ternary in template HOT 1
- Svelte 5: state_unsafe_mutation Updating state inside a derived is forbidden. If the value should not be reactive, declare it without `$state` HOT 2
- Svelte 5: Automatically implement toJSON so state and properties are serialized. HOT 3
- Ternary in html attributes doesn't compile for production HOT 2
- Svelte 5 bug when moving mouse HOT 6
- $state, $bindable without backup value become 'undefined' in $derived HOT 5
- Svelte 5: SSR breaks rendering of Select component when HMR is enabled HOT 19
- Data returned from load function is stateless HOT 2
- Svelte 5: Add `class:list` directive HOT 5
- Individual states seemingly working like a singleton? I don't even know how to caption this HOT 1
- Distinguish between properties and attributes on custom elements HOT 10
- [REPL] modifying file name to same value wipes contents HOT 1
- `$props` aliasing allows invalid names HOT 7
- Svelte5: unexpected `Component` type errors HOT 4
- Ability to ignore svelte warnings other than a11y HOT 2
- Svelte 5: only block root tags are checked for being closed HOT 9
- svelte5: while binding this to none-existing property on desctructed object, svelte adds the property HOT 4
- `<script context="module">` -> `<script module>` HOT 5
- PreventDefault on touchstart not working! HOT 13
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svelte.