Indecision - Tylung/vue-apuntes GitHub Wiki

Este es el componente de mi aplicación Indecision, tiene las funcionalidades principales de la App

Primeramente verifica con el v-if si existe la propiedad reactiva img y si existe la reenderiza y le da un fondo negro

<img v-if="img" :src="img" alt="bg">
<div class="gb-dark"></div>

Despues muestra el input donde se realiza un v-model hacia la propiedad reactiva question

<div class="indecision-container">
 <h1>Indecision</h1>
    <input
    type="text"
    placeholder="Hazme una pregunta"
    v-model="question">    
    <p>Recuerda terminar con un signo de interrogación ( ? )</p>
    <div v-if="isValidQuestion">
        <h2 >{{ question }}</h2>
        <h1> {{ answer }} </h1>
    </div>

Y si se cumple la propiedad reactiva isValidQuestion se reendizará la question y answer

Se declaran las propiedades reactivas

export default {
    data() {
        return {
            question: null,
            answer: null,
            img: null,
            isValidQuestion: false
        }
    },

question ▶️ Es la pregunta que ingresa el usuario

answer ▶️ Es la respuesta del api a la pregunta que ingresa el usuario

img ▶️ Es la ruta de la imagen del meme del api

isValidQuestion ▶️ Es la propiedad que indica si la pregunta es válida

 methods: {
        async getAnswer() {
            this.answer = 'Pensando...'

            let { answer, image } = await fetch('https://yesno.wtf/api')
                .then( r => r.json() )

            // answer === 'yes' ? answer = 'Si!' 
            // : answer === 'no' ? answer = 'No!' : 
            // answer === 'maybe' ? answer = 'Tal vez' : answer = answer
            const answers = {
                yes:'Si!',
                no:'No!',
                maybe:'Tal vez'
            }

            answer = answers[answer]

            this.answer = answer
            
            this.img = image
        }
    },

El unico metodo es el getAnswer y hace una peticion http al api https://yesno.wtf/api, para obtner la respuesta y la imagen y reemplazarlas por las propiedades answer e img

watch: {
        question( value, oldValue ){

            this.isValidQuestion = false

            if ( !value.includes('?')) return

            this.isValidQuestion = true

            this.getAnswer()
            // TODO: Realizar petición http
        }
    }

El watch se encarga de estar atento a los cambios de la pregunta ingresada por el usuario

Si el texto contiene el signo de interrogación ? se lanza el metodo getAnswer() y se coloca true en la propiedad reactiva isValidQuestion

Y si todo sale como se espera se renderizará la respuesta y la imagen cuando el usuario coloque el ? 😄

Pero si no hay internet o cualquier fallo ocurre no se mostrara ni la imagen ni la respuesta 🔥