segun que radio quiero hacer, se abrira el div y se cerrara el otro. No pude entenderlo. Soy nuevo en vuejs y stackoverflow. Gracias por adelantado.
<div class="col-sm-3 d-flex border-light"> <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange($event)" value="1" checked> <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label> </div> <div class="col-sm-3 d-flex border-light"> <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange($event)" value="2"> <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label> </div> <div>YELLOW</div> <div>BLUE</div> export default { data() { return { show: true, } }, methods: { onChange(event) { var data = event.target.value; } } }En la plantilla, llama al método con el valor @change="onChange(false)" Muestra divs si los datos mostrados son verdaderos o falsos v-if="show" En el método, configura la visualización de datos dependiendo del botón de opción que haya hecho clic en this.show = color Something como el siguiente fragmento:
new Vue({ el: '#app', data() { return { show: true, } }, methods: { onChange(color) { this.show = color } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div class="col-sm-3 d-flex border-light"> <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio3" @change="onChange(true)" value="1" checked> <label class="form-check-label" for="inlineRadio3"><b> YELLOW</b></label> </div> <div class="col-sm-3 d-flex border-light"> <input class="form-check-input" type="radio" name="inlineRadioOptions1" id="inlineRadio4" @change="onChange(false)" value="2"> <label class="form-check-label" for="inlineRadio4"><b> BLUE</b></label> </div> <div v-if="show">YELLOW</div> <div v-if="!show">BLUE</div> </div>