Tengo un select en un componente, y al seleccionar un valor quiero que que cambien los estilos de un span para resultarlos en una tabla. cómo se podría hacer de una manera eficiente y efectiva
-
2Mira Cómo preguntar para que tu pregunta sea mejor recibida. También, aprovecha y haz el recorrido de bienvenida para entender mejor cómo funcionamos y de paso obtener tu primera medalla! Como se podria hacer es una pregunta que puede tener montones de respuestas.. mejor muestra lo que tienes, como lo intentaste y de ahi correjimos tu logica...– gbianchi ♦el 20 ene. 2021 a las 15:46
Añade un comentario
|
1 respuesta
Quizás buscas algo así:
<template>
<div :class="['common-styles', selectedClass]">
<select name="selectClass" @change="onChange($event)">
<option
v-for="(option, id) in options"
:key="id"
:value="option.className"
:selected="option.selected"
>
{{ option.name }}
</option>
</select>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
selectedClass: "",
options: [
{ name: "Black", className: "", selected: true },
{ name: "Red", className: "redClass" },
{ name: "Blue", className: "blueClass" },
],
};
},
methods: {
onChange(event) {
this.selectedClass = event.target.value;
},
},
};
</script>
<style>
#app {
text-align: center;
}
.common-styles {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
border: 1px solid black;
}
.redClass {
border: 1px solid red;
}
.blueClass {
border: 1px solid blue;
}
</style>