javascript - Vue - 如果加载响应时显示一个 div
问题描述
当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 的正确方法是什么?
解决方案
您应该在成功获取请求后更改状态
<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
})
}
}
推荐阅读
- python - Python:指定与继承一起使用的类方法的返回类型
- arrays - 从数组中取消大小时,Rust 如何确定切片的长度?
- php - Wordpress add_filter 'template_include' 不起作用
- windows - 基于多个文件名批量创建多个文件夹,并将多个相关文件移动到创建的文件夹中
- scala - scalaz 怎么能做“A \/ B”,我怎么能做我自己的“B.??” 或“A B”
- python - Django MoneyField:MoneyField 的值无效
- javascript - 执行一个shell脚本,在它发生时打印输出,并阻塞直到它完成?
- flutter - 警告!您当前运行的“flutter”工具来自与此软件包上次使用的不同的 Flutter 存储库
- go - go test ./... 内存不足
- python - 有一个需要嵌套字典的项目,我几乎可以正常工作,但继续出现索引错误