Vue - 如果加載響應時顯示一個 div

Question

當 api 調用成功時，我試圖顯示一個 div。 當我單擊一個按鈕並完成過程時，使用 v-if 控件來檢測變量是真還是假。

     <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>

問題：V-if 沒有檢測到“正確”變量何時為真。 我想當我得到回復時有什么問題。 過程完成后將“正確”變量設置為 true 的正確方法是什么？

Answer 1

您應該在成功獲取請求后更改 state

<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
          })
     }
 }