When the for attribute of the label is equal to the ID of the form element, clicking the label will trigger the click event of the corresponding form element, providing convenience for some scenarios.

Based on the service scenario, an optional component is simply encapsulated.

Basic use of radio

Take a look at the basic use cases for official radio:

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
<script>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})
</script>
Copy the code

Encapsulate radio components

Obviously, it is very complicated to write radio elements one by one in actual business use. It is hoped that they can be used in this way after encapsulation:

<radio-component :value.sync="xxx" :options="[{value: text: 'Beijing', 'bj'}]"></radio-component>
Copy the code

Simply pass in options and value to use!

  • Write a simpleidGeneration method of
  • Considering the parent component is better to call, use directlysyncGrammar sugar, of course, can also be usedv-modelGrammar sugar, personally I think the former is better understood
  • Here,labelThe internal content, in a real project, can be replaced with arbitrary tags and components for added flexibility
<template> <div class="radio-button-box" style="display: flex"> <div v-for="(item, index) in optionsWithId" :key="index"> <input type="radio" hidden :value="item.value" :id="item.id" /> <label :for="item.id" @click="clickRadio(item)"> <! <button :class="{BTN: true, selected: Value = = = item. Value} "> {{item. Text}} < / button > < / label > < / div > < / div > < / template > < script > / * * * this component is essentially a radio, Options can be customized, but must have text and value. By default, two options * value are mandatory. If the value of the parent component changes, use sync syntax to modify the value of the parent component. <radio-component :value.sync="xxx"></radio-component> */ export default { name: 'RadioComponent', props: { options: { required: true, type: Array }, value: { required: true } }, computed: {optionsWithId() {this.options.foreach (item => {item.id = 'radio${math.random ().toString().slice(3), 13)} `; }); return this.options; } }, methods: { clickRadio(item) { this.$emit("update:value", item.value); }}}; </script> <style scoped> .radio-button-box { display: flex; } .btn { margin-right: 20px; padding: 5px 10px; border: 1px solid; font-size: 12px; } .btn.selected { background-color: #69f; color: #fff; } </style>Copy the code

Use radio components

If you use it, there’s nothing there, just save two attributes

<template> <div> <h1> Use of radio components! </h1> <radio-component :value.sync="city" :options="options"></radio-component> </div> </template> <script> import RadioComponent from "./components/RadioComponent.vue"; export default { name: "App", components: { RadioComponent }, data() { return { city: null, options: [ { text: Value: "Beijing", "bj"}, {value: the text: "Shanghai", "sh"}}; }}; </script>Copy the code