How to close a banner on clicking X with VueJS (on mobile)

user_11206142 0
Viewed 353

I am new to VueJS. I have a component here for a banner that appears on the mobile version of my page. I would like to close it when clicking the X icon. How could I achieve this? Would I need a button instead?

<template>
    <div class="mobile-banner">
        <div class="container card">
            <div class="row">
                <div class="column one">
                    <drag-icon></drag-icon>
                </div>
                <div class="column two">
                    <ul>
                        <li>
                            Insctructions
                        </li>
                    </ul>
                </div>
                <div class="column three">
                    <div class="x-icon" />
                </div>
            </div>
        </div>
    </div>
</template>

Here's some style as well:

<style lang="scss" scoped>
.mobile-banner {
    width: 100%;
    position: fixed;
    z-index: $mobile-instructions-banner;
    background-color: $greyF;
    color: $grey0;
}
.container {
    display: flex;
    justify-content: center;
}
.x-icon:before {
    content: "\2715";
}
</style>
vue.js sass css javascript
2 Answers
<div class="mobile-banner" :class={active: bannerStatus}>
        <div class="container card">
            <div class="row">
                <div class="column one">
                    <drag-icon></drag-icon>
                </div>
                <div class="column two">
                    <ul>
                        <li>
                            Insctructions
                        </li>
                    </ul>
                </div>
                <div class="column three">
                    <div class="x-icon" @click="bannerStatus = false" />
                </div>
            </div>
        </div>
    </div>

<script>
export default {
  data:() => ({
    bannerStatus: true;
  })
}
</script>

<style lang="scss" scoped>
.mobile-banner {
    display:none;
    width: 100%;
    position: fixed;
    z-index: $mobile-instructions-banner;
    background-color: $greyF;
    color: $grey0;

    &.active {
      display: block;
    }
}
.container {
    display: flex;
    justify-content: center;
}
.x-icon:before {
    content: "\2715";
}
</style>

bannerStatus determines the show/hide state of your banner, change it to true when you want to show it again

user_157821190

You can achieve this with data, v-if and v-on:click

1. data

Create a boolean variable in the data option and set it's value to true.

<script>
 export default {
  name: 'MobileBanner',
  data () {
    return {
        isBanner: true
    }
  }
}
</script>

2. v-if

Add a v-if directive to conditionally render the banner:

<div v-if="isBanner" class="mobile-banner">

The banner will now render when the component is loaded since we set 'isBanner' value to true in step 1.

3. v-on:click

We can now use the onclick event handler v-on:click(or just @click for short) to set 'isBanner' value to false which will destroy/remove the banner:

<div class="x-icon" @click="isBanner = false" />
user_156340400
Related