[英]Vue JS conditional rendering on first time opening the page
我有一個 vue 組件應該在第一次打開頁面時呈現,但我對此邏輯有點困惑。 我正在使用 localStorage 來驗證 wasVisited 項目,我應該在某處將它設置為 1,以便下次打開觸發模式的視圖時,模式不會顯示,我只是不確定在哪里,mounted() 不會似乎是我需要設置它的地方。
<template v-if="localStorage.getItem('wasVisited') === null">
<div>
<b-modal ref="disc" title="Hello" ok-only ok-variant="light" size="lg" body-bg-variant="dark" header-bg-variant="dark" header-text-variant="light" body-text-variant="light" footer-bg-variant="dark" footer-text-variant="light" title-class="text-light">
<div class="text-justify modal-text">
<p>Hi from modal</p>
</div>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['disc'].show()
},
hideModal() {
this.$refs['disc'].hide()
},
},
mounted() {
console.log('Modal mounted.');
this.showModal();
localStorage.setItem('wasVisited', '1');
}
}
</script>
編寫代碼的更好方法應該是
<template>
<div>
<b-modal ref="disc" title="Hello" ok-only ok-variant="light" size="lg" body-bg-variant="dark" header-bg-variant="dark" header-text-variant="light" body-text-variant="light" footer-bg-variant="dark" footer-text-variant="light" title-class="text-light">
<div class="text-justify modal-text">
<p>Hi from modal</p>
</div>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['disc'].show()
},
hideModal() {
this.$refs['disc'].hide()
},
},
mounted() {
console.log('Modal mounted.');
if(localStorage.getItem('wasVisited') === null) this.showModal();
localStorage.setItem('wasVisited', '1');
}
}
</script>
基本上我所做的是,我從您的模板中刪除了您的v-if ,而是將其添加到您的掛載屬性中,這樣如果尚未設置 localStorage,則會自動調用顯示模態的函數。 同時我們給wasVisited 賦值
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.