No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Estilos reactivos

12/23
Recursos

Aportes 12

Preguntas 1

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Los estilos utilizados:

<style>
        html, body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

Otra manera de hacerlo ser铆a crear un m茅todo dentro de methods obviamente, al cual podr铆amos llamar toggleDoor(), en el cual ponemos la l贸gica de 鈥渢his.open = !this.open鈥, y tras esto, escribir la l贸gica de los estilos css:

const vm = Vue.createApp({
            data(){
                return {
                    text: "Puerta cerrada",
                    open: false,
                    styles: {
                        backgroundColor: "#eca1a6",
                    },
                };

               
            },

            methods: {

                toggleDoor(){
                    this.open = !this.open;

                    this.open ? this.styles.backgroundColor = "#b5e7a0" : this.styles.backgroundColor = "#eca1a6"
                }

            },

            watch: {
                open(value){
                    if (value){
                        this.text = "Puerta abierta";
                    }
                    else{
                        this.text = "Puerta cerrada";
                        
                    }
                }
            },

            template: `
                <div class="container" :style="styles">
                    <h2>{{text}}</h2>
                    <button @click="toggleDoor">{{open ? "Cerrar" : "Abrir"}}</button> 
                </div>
                
            `
        }).mount("#app");

Adem谩s de la falicidad que da vue para manejar estilos entre otras cosas. sigo aprendiendo de esos errores de novatos!! que hayan m谩s errores para saber como resolverlos en el futuro.

Todo esto me recuerda al curso de WebComponents鈥 aunque aqui en vue es mucho mas facil, hasta ahora :3

Mi aporte 2 ejemplos de la clase

<div class="container" :style="styles">
            <h2>{{message}}</h2>
            <button @click = 'open =! open'>{{label}}</button>
        </div>
        <div class="container" :class="openDoor">
            <h2>{{message}}</h2>
            <button @click = 'open =! open'>{{label}}</button>
        </div>
 data() {
                return {
                    open: false,
                    styles: {
                        backgroundColor: '#eca1a6'
                    }
                }
            },
watch: {
                open(value){
                    if(value){
                        this.message = 'Puerta  abierta';
                        this.styles.backgroundColor = '#b5e7a0'
                    }else{
                        this.message = 'Puerta  cerrada';
                        this.styles.backgroundColor='#eca1a6'
                    }
                }
            }

            computed: {
                label(){
                    return this.open ? 'cerrar' : 'Abrir'
                },
                openDoor(){
                    return this.open ? ['open'] : ['closed'];
                }

As铆 aplique lo visto en la clase鈥

Maravilloso.
Finalmente siento que me est谩n entrando los conceptos b谩sicos de Vue.

Gracias 馃槂

Adem谩s de la falicidad que da vue para manejar estilos entre otras cosas. sigo aprendiendo de esos errores de novatos!! que hayan m谩s errores para saber como resolverlos en el futuro.

En mi caso use JQuery para a帽adir y remover las clases correspondientes, puse por defecto la clase closed y ya luego a帽ad铆a y remov铆a la correspondiente, el m茅todo container_styles_2 lo llamo luego del m茅todo que cambia el valor de open y me sirve correctamente

const vm = Vue.createApp({
            data: () => {
                return {

                    text: "Puerta Cerrada",
                    open: false,
                };
            },
            computed: {
                action: function () {

                    return this.open ? "Cerrar" : "Abrir";
                },
                container_styles: function() {
                    return this.open ? ['open'] : ['closed'];
                }
            },
            watch: {
                open: function(value) {

                    this.text = value ? "Puerta Abierta" : "Puerta Cerrada";
                }
            },
            methods: {
                door: function () {

                    this.open = !this.open;
                    this.container_styles_2();
                },
                container_styles_2: function() {

                    if (this.open) {
                        
                        $("#app .container").removeClass("closed");
                        $("#app .container").addClass("open");
                    } else {
                        
                        $("#app .container").removeClass("open");
                        $("#app .container").addClass("closed");
                    }
                }
            },
            template: 
            ` 
            <div class="container closed">
                <h2>{{ text }}</h2>
                <button v-on:click="door">{{ action }}</button>
            </div>
            `   
        }).mount("#app");

Creo que Vue es increible, yo he trabajado con React y la verdad me fue un poco dificil entender la reactividad al principio, pero con Vue es super facil de comprender.

Como creo que todos estan haciendo el reto de ponerle una imagen al codigo, quise intentarlo y este fue mi codigo (Aunque reutilice los estilos de la clase)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <main id="app"></main>

    <script>
        const vue = Vue.createApp({
            data() {
                return {
                    text: "La puerta esta cerrada",
                    isOpen: false,
                }
            },
            watch: {
                isOpen(current) {
                    if(current) {
                        this.text = "La puerta esta abierta"
                    } else {
                        this.text = "La puerta esta cerrada"
                    }
                }
            },
            computed: {
                image() {
                    return this.isOpen ? "https://us.123rf.com/450wm/grebeshkovmaxim/grebeshkovmaxim1904/grebeshkovmaxim190400553/123026095-abrir-puerta-realista-aislada-en-sala-blanca.jpg?ver=6" : "https://previews.123rf.com/images/byzonda/byzonda1505/byzonda150500089/40505435-blanc-porte-ferm%C3%A9e-avec-cadre.jpg";
                },
                
                bgColor() {
                    return this.isOpen ? 'open' : 'closed';
                },
                
                label() {
                    return this.isOpen ? 'Close' : 'Open'
                }
            },
            methods: {
                changeOpen() {
                    return this.isOpen = !this.isOpen
                }
            },
            template: `
            <div class="container" :class="bgColor">
                <h2>{{text}}</h2>
                <img :src="image"/>
                <button type="button" @click="changeOpen">{{ label }}</button>
            </div>
            `
        }).mount('#app');
    </script>
    
    <style>
        html, body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }

        img {
            height: 400px;
            width: 400px;
            border-radius: 12px;
        }

        .open {
            background-color: rgb(100, 226, 100);
        }

        .closed {
            background-color: rgb(219, 102, 102);
        }
    </style>
</body>
</html>
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="Description" content="Extended Description">
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Estilos reactivos</title>
    <link rel="stylesheet" href="">

    <style>
        body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

</head>

<body>
    <script src="https://unpkg.com/[email protected]"></script>

    <div id="app"></div>

    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    textDoor: 'Puerta est谩 cerrada',
                    open: false,
                    // Agregando variable para los estilos de atributo style, debe ser un objeto
                    // En el template debemos agregar el estilo reactivo de esta manera:
                    // v-bind:style="var-styles" o :style="var-styles"
                    // los estilos deben escribirse en camelCase, ejemplo: background-color --> backgroundColor
                    styles: {
                        backgroundColor: '#e5e5e5',
                    },
                };
            },
            watch: {
                open(value) {
                    if (value) {
                        this.textDoor = 'Puerta est谩 abierta';
                        // Color verde si est谩 abierta
                        // this.styles.backgroundColor = '#b5e7a0';
                    } else {
                        this.textDoor = 'Puerta est谩 cerrada';
                        // Color rojo si est谩 cerrada
                        // this.styles.backgroundColor = '#eca1a6';
                    }
                }
            },
            computed: {
                styleStatusBG() {
                    return this.open ? 'open': 'closed';
                },
            },
            /*
            Colocar los estilo con el atributo style
            template: `
                <div class="container" :style="styles">
                    <h2>{{ textDoor }}</h2>
                    <button @click="open = !open">{{ open ? 'cerrar' : 'abrir' }}</button>
                </div>
            `,
            */
            // Colocar los estilo con el atributo class
            // :class="p1" o ":class="['p1','p2','p3'...]"
            // Fromas de agregar la clse en este ejemplo:
            // 1. :class="[open ? 'open' : 'closed']"
            // 2. :class="{ 'open': open, 'closed': !open }"
            // 3. Una propiedad computada :class="styleStatusBG"
            template: `
                <div class="container" :class="styleStatusBG">
                    <h2>{{ textDoor }}</h2>
                    <button @click="open = !open">{{ open ? 'cerrar' : 'abrir' }}</button>
                </div>
            `,
        }).mount('#app');
    </script>

</body>

</html>

Este es mi c贸digo actual

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            height: 100vh;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }
        #app, .container {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }
        button {
            margin-top: 24px;
            border: none;
            background-color: white;
            padding: 8px 24px;
            border-radius: 12px;
        }
        .closed {
            background-color: #eca1a6;
        }
        .open {
            background-color: #b5e7a0;
        }
    </style>

</head>
<body>
    <script src="https://unpkg.com/[email protected]"></script>
    <div id="app">
        
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    text: "Puerta cerrada",
                    opcion: "Abrir",
                    open: false,
                    styles: "open"
                }
            },
            methods: {
                abrir: function() {
                    this.open = !this.open
                }
            },
            watch: {
                open(value) {
                    if (value){
                        this.text = "Puerta abierta"
                        this.opcion = "Cerrar"
                        this.styles = "open"
                        
                    } else {
                        this.text = "Puerta cerrada"
                        this.opcion = "Abrir"
                        this.styles = "closed"
                    }

                }
            },
           
            template: `
            
            <div class="container" :class="styles">
                <h2>{{ text }}</h2>
                <button @click="abrir">{{ opcion }}</button>
            </div>    
            `
        }).mount("#app")
        console.log(vm)
    </script>
</body>
</html>