Conceal div when clicked in Vue.js

Question

Conceal div when clicked in Vue.js

Could you provide the Vue.js equivalent for this jQuery code snippet?

$('.btn').click(function(){  $('.hideMe').hide()  });

javascript vue.js frontend

Answer 1

Answer №1

Out of the box, jQuery is good to go, but Vue.js requires a bit more setup. To start using a Vue.js component or App, you need to bind that component with its data to a specific HTML tag within your template.

For instance, in this scenario, the specified element is

<div id="app"></div>

and is accessed through el: #app, reminiscent of jQuery syntax.

Once you define a variable like isHidden which represents the toggle state (initialized as false inside the data object), you'll then use Vue-specific code such as v-on:click="" and v-if="".

To dive deeper into Vue.js coding techniques, it's recommended to consult the official documentation:

Note: Delve into the comprehensive documentation for a thorough understanding of Vue.js concepts.

var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582e2d3d186a766d76696b">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>
  
  <h1 v-if="!isHidden">Click to hide me!</h1>
</div>

Answer 2

Out of the box, jQuery is good to go, but Vue.js requires a bit more setup. To start using a Vue.js component or App, you need to bind that component with its data to a specific HTML tag within your template.

For instance, in this scenario, the specified element is

<div id="app"></div>

and is accessed through el: #app, reminiscent of jQuery syntax.

Once you define a variable like isHidden which represents the toggle state (initialized as false inside the data object), you'll then use Vue-specific code such as v-on:click="" and v-if="".

To dive deeper into Vue.js coding techniques, it's recommended to consult the official documentation:

Note: Delve into the comprehensive documentation for a thorough understanding of Vue.js concepts.

var app = new Vue({
  el: '#app',
  data: {
    isHidden: false
  }
})

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="582e2d3d186a766d76696b">[email protected]</a>/dist/vue.js"></script>

<div id="app">
  <button v-on:click="isHidden = true">Hide the text below</button>
  <button v-on:click="isHidden = !isHidden">Toggle hide and show</button>
  
  <h1 v-if="!isHidden">Click to hide me!</h1>
</div>

Answer 3

Answer №2

If you're new to Vue, this question might seem basic at first. I recommend checking out the guide for a quick answer to your query.

But if you're still in need of an answer, here's how you can toggle elements in Vue:

new Vue({
 el: '#app',
 data () {
   return {
     visibility: true
   }
 },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <button @click='visibility = !visibility'> Click Here </button>
  <div v-show='visibility'>Showing Content</div>
</div>

Answer 4

If you're new to Vue, this question might seem basic at first. I recommend checking out the guide for a quick answer to your query.

But if you're still in need of an answer, here's how you can toggle elements in Vue:

new Vue({
 el: '#app',
 data () {
   return {
     visibility: true
   }
 },
})

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <button @click='visibility = !visibility'> Click Here </button>
  <div v-show='visibility'>Showing Content</div>
</div>

Answer 5

Answer №3

<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Click here to toggle hide and show</button>

        <h1 v-if="!isHidden">Hide me when button is clicked!</h1>
    </div>
</div>

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }

Answer 6

<div>
    <div>

        <button v-on:click="isHidden = !isHidden">Click here to toggle hide and show</button>

        <h1 v-if="!isHidden">Hide me when button is clicked!</h1>
    </div>
</div>

name: "Modal",
    data () {
        return {
            isHidden: false
        }
    }

Answer 7

Answer №4

When attempting to achieve this task, I found that using a dynamic array instead of a single Div required more than just a static Vue variable.

@samayo points out that the hide action from jQuery vs Vue is not different, so an alternative method is to trigger the jQuery through the @click function.

The Vue Dev kit advises against mixing JS inline with @click events, and running into issues like @user9046370 did when trying to incorporate the jQuery command within @click.

Here's a new way to approach this:

<tr v-for="Obj1,index in Array1">
    <td >{{index}}</td>
    <td >
        <a @click="ToggleDiv('THEDiv-'+index)">Show/Hide List</a><BR>
        <div style='display:none;' :id="'THEDiv-'+index" >
            <ul><li v-for="Obj2 in Array2">{{Obj2}}</li></ul>
        </div>
    </td>
</tr>

Method:
ToggleDiv: function(txtDivID)
{
    $("#"+txtDivID).toggle(400);
},

This method also allows for incorporating fancy jQuery transitions if desired.

Answer 8

When attempting to achieve this task, I found that using a dynamic array instead of a single Div required more than just a static Vue variable.

@samayo points out that the hide action from jQuery vs Vue is not different, so an alternative method is to trigger the jQuery through the @click function.

The Vue Dev kit advises against mixing JS inline with @click events, and running into issues like @user9046370 did when trying to incorporate the jQuery command within @click.

Here's a new way to approach this:

<tr v-for="Obj1,index in Array1">
    <td >{{index}}</td>
    <td >
        <a @click="ToggleDiv('THEDiv-'+index)">Show/Hide List</a><BR>
        <div style='display:none;' :id="'THEDiv-'+index" >
            <ul><li v-for="Obj2 in Array2">{{Obj2}}</li></ul>
        </div>
    </td>
</tr>

Method:
ToggleDiv: function(txtDivID)
{
    $("#"+txtDivID).toggle(400);
},

This method also allows for incorporating fancy jQuery transitions if desired.

Answer 9

Answer №5

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="toggleFilter"></i></button>
</template>

<script>
    export default {
        data: () => ({
            filterActive: true,
        }),

        methods: {
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
                this.filterActive = false;
            },

            hideFilter() {
                eventHub.$emit('hide-guest-advanced-filter');
                this.filterActive = true;
            },

            toggleFilter() {
                return this.filterActive ? this.showFilter() : this.hideFilter();
            }
        }
    }

</script>

This method is effective.

Answer 10

<template>
    <button class="btn btn-outline-secondary" type="button"><i class="fas fa-filter" @click="toggleFilter"></i></button>
</template>

<script>
    export default {
        data: () => ({
            filterActive: true,
        }),

        methods: {
            showFilter() {
                eventHub.$emit('show-guest-advanced-filter');
                this.filterActive = false;
            },

            hideFilter() {
                eventHub.$emit('hide-guest-advanced-filter');
                this.filterActive = true;
            },

            toggleFilter() {
                return this.filterActive ? this.showFilter() : this.hideFilter();
            }
        }
    }

</script>

This method is effective.

Conceal div when clicked in Vue.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Error Message: Undefined Constructor for Firebase Google Authentication

Repeat the execution or refresh an EventListener

When using Next.js revalidate, an error may occur stating: "There are keys that require relocation: revalidate

Encountered an issue while building npm: "Error: Unable to locate module @restart/context

Unlocking Authorization in VueJS

Tips for incorporating external JavaScript code into React components

Utilizing getServerSideProps in the new app router (app/blah/page.tsx) for maximum functionality

Using VueJs to associate boolean values with dropdowns

Tips for retrieving a reactive variable from a setup() method?

Opt for router-link over web route when working with Laravel

Scroll to top on page load in Vue

Is there a way to customize the Master Page in asp.net to resolve the Bootstrap4 dropdown issue? I am encountering an error message that says "Uncaught TypeError: Bootstrap

Detonating the second-level element in a PHP/Typescript array

Creating a tooltip for new list items: A step-by-step guide

Saving search results using AJAX in Vue and Laravel's database

The Angular service/value is failing to retrieve the updated variable from the $(document).ready() function

"Exploring the process of adding external JavaScript or CSS files into Angular 2 using webpack

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Generating a download link with an expiration feature in node.js or express for both frontend and backend operations

JavaScript if statement can be used to evaluate two variables that have the same values