vue2查看弹框只有第一次打开调用接口 后续再去打开弹框查看无需调用接口 具体代码示列
时间: 2023-12-03 12:05:29 浏览: 23
好的,下面是一个简单的示例代码:
```
<template>
<div>
<button @click="showDialog">打开弹框</button>
<div v-if="dialogVisible">
<h2>{{ title }}</h2>
<p>{{ content }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
title: '',
content: '',
hasData: false // 新增的状态变量,用来记录是否已经获取过数据
};
},
methods: {
showDialog() {
this.dialogVisible = true;
if (!this.hasData) { // 如果还没有获取过数据,则调用接口
this.getData().then(data => {
this.title = data.title;
this.content = data.content;
this.hasData = true; // 设置状态变量为已获取过数据
});
}
},
getData() {
// 调用接口获取数据
return new Promise(resolve => {
setTimeout(() => {
resolve({
title: '弹框标题',
content: '弹框内容'
});
}, 1000);
});
}
}
};
</script>
```
在这个示例中,我们新增了一个名为 `hasData` 的状态变量,用来记录是否已经获取过数据。在打开弹框时,我们先检查该状态变量是否已经被设置,如果已经被设置,则不再调用接口。如果该状态变量未被设置,则调用接口获取数据,并将该状态变量设置为已获取过数据。这样,在后续再次打开弹框时,就可以直接使用上次获取的数据了。