An Interest In:
Web News this Week
- April 12, 2024
- April 11, 2024
- April 10, 2024
- April 9, 2024
- April 8, 2024
- April 7, 2024
- April 6, 2024
Some of Our Sources
- Technology Review
- Smashing Apps
- Six Revisions
- Abduzeedo
- TutsPlus - Design
- Reencoded
- Specky Boy
- Design Modo
- Android Dissected
- The Verge
Help Webnuz
Referal links:
April 29, 2022 11:35 am GMT
Original Link: https://dev.to/ccreusat/react-vue-and-svelte-comparing-select-binding-4cha
React, Vue and Svelte : Comparing Select binding
Select Binding in...
You will notice that without any extra code, React will select the next value because the first one is disabled. Vue and Svelte leave the select empty.
Check it out
React
const [selected, setSelected] = useState<string>('Choose one option');<section> <h2>Select</h2> <select onChange={(e) => setSelected(e.target.value)}> <option value="" disabled> Please select one </option> <option>Frontend Developer</option> <option>Backend Developer</option> <option>Fullstack Developer</option> </select> <p>Selected: {selected}</p></section>Vue
const selected = ref('Choose one option');<section> <h2>Select</h2> <select v-model="selected"> <option value="" disabled>Please select one</option> <option>Frontend Developer</option> <option>Backend Developer</option> <option>Fullstack Developer</option> </select> <p>Selected: {{ selected }}</p></section>Svelte
let selected: string = 'Choose one option';<section> <h2>Select</h2> <select bind:value={selected}> <option disabled value="">Please select one</option> <option>Frontend Developer</option> <option>Backend Developer</option> <option>Fullstack Developer</option> </select> <p>Selected: {selected}</p></section>Original Link: https://dev.to/ccreusat/react-vue-and-svelte-comparing-select-binding-4cha
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To