Estoy tratando de mostrar un div cuando la llamada a la API es exitosa. Cuando hago clic en un botón y el proceso se completa, use el control v-si para detectar la variable es verdadera o falsa.

     <div id="app" class="container h-100">    

        <div v-if="correct==true" class="alert alert-success" role="alert">
             <strong>Correcto</strong>. Datos actualizados de forma satisfactoria.
        </div> 

        <button v-on:click="guardar" type="button" class="btn btn-outline-primary btn-block">Modificar </button></div>

</div>

            <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
            <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
            <script>
                var app = new Vue({
                    el: '#app',
                    data() {
                        return {
                            correct: false
                        }
                    },
                    methods: {
                        guardar: function () {
                            axios
                                .get('ENDPOINT')
                                .then(response => {
                                    return {
                                        correct: true
                                    }
                                })
                                .catch(function (error) {
                                    console.log(error);
                                })
                        },
                    }
                })
            </script>

El problema: V-if no detecta cuando la variable 'correcta' es verdadera. Supongo que algo anda mal cuando recibo respuesta. ¿Cuál es la forma correcta de establecer la variable 'correcta' como verdadera cuando el proceso está completo?

0
El Hombre Sin Nombre 26 sep. 2019 a las 13:48

1 respuesta

La mejor respuesta

Debe cambiar el estado después de una solicitud de obtención exitosa

<div v-if="correct" class="alert alert-success" role="alert">
      <strong>Correcto</strong>. Datos actualizados de forma satisfactoria.
</div> 

methods: {
  guardar: function () {
     axios
         .get('ENDPOINT')
         .then(response => {
            // here update the correct state
            this.correct = true
          })
          .catch(function (error) {
             console.log(error)
             this.correct = false
          })
     }
 }
1
onuriltan 26 sep. 2019 a las 10:55