Vue.js-如何通过单击并切换数据来使用方法调用加载数据？

当使用vue.js方法单击按钮时，我正在通过rest api加载数据。要隐藏加载的数据，我再次单击按钮。当我单击按钮再次显示数据时，会再次调用相同的方法并显示两次数据

<div v-if="comment.answers_count !== 0">
            <button
                    @click="toggleAnswers"
                    :class="{
                    'btn-danger': loadAnswers,
                    'btn-outline-danger': !loadAnswers
                    }"><strong>{{ comment.answers_count }} show answers</strong></button>
</div>

{{comment.answers\u count}}显示答案

如何加载数据一次，单击按钮隐藏数据，并在切换按钮时显示相同的加载数据

---

也许有一种方法可以使用计算属性？

在数据中创建一个新属性：function（）{} e、 x

然后，在你的函数上 执行以下操作

methods:{
    toggleAnswers:function(){
       /** if answers are not loaded , load them **/
       if(!this.answers_loaded){
           /** mark answers_loaded to true, so we do not call this code
           again. Should be better put on your success request handler
           to make sure that they were successfully loaded**/
           this.answers_loaded = true;
           
           //code to load the answers

       }
    }
}

因此，第一次单击按钮和函数toggleAnswers时，被称为变量answers\u loaded pass the if check

---

由于answers_loaded等于true，因此每隔一次单击该按钮时，它将无法通过if检查，并且不会再次调用部分代码来加载答案，因此，我无法为您找到真正的目的？ 如果只想加载一次数据，可以使用

v-once

，例如

加载数据或隐藏数据
... 
loadData（）{
设置超时（（）=>{
this.data='加载的数据'
}, 500)
},
希德达塔（）{
this.data=this.data&&null
}

---

如果您想要切换圈，那么您应该使用%2设置一个标记来判断要运行哪个函数。

如果答案已加载，您是否进行了检查（变量）以不再加载它们。看起来您的ajax处理程序又被调用了。谢谢，我找到了：toggleAnswers（）{this.isCalled==false？this.loadAnswers（）：this.hideAnswers（）；}，在hideAnswers中，我正在切换变量：）

methods:{
    toggleAnswers:function(){
       /** if answers are not loaded , load them **/
       if(!this.answers_loaded){
           /** mark answers_loaded to true, so we do not call this code
           again. Should be better put on your success request handler
           to make sure that they were successfully loaded**/
           this.answers_loaded = true;
           
           //code to load the answers

       }
    }
}