Show or hide a component based on a mouse click in Vue JS

Question

Show or hide a component based on a mouse click in Vue JS

After a prolonged absence from working with Vue JS, I find myself in the process of displaying a list of data with a button for each item. The goal is to conditionally render a component when a button is clicked.

I am wondering if there is a recommended approach by Vue for achieving this functionality. Should I be directly manipulating the DOM? The current implementation does not seem to be effective.

<template>
    <div v-for="data in list">
      {{ data.bar}}
      <button @click="handleClick">
        <div v-if="dataset.loading === 'true'">
          <loader/>
        </div>
        <div v-else>
      </button>
    </div>
</template>

<script setup>
    import { loader } from './components'

    const list = [{ foo: 'bar'}];
    
    const handleClick = (el) => {
        el.dataset.loading = 'true';
        setTimeout(3, () => el.dataset.loading = 'false');
    };
</script>

javascript vue.js frontend

Answer 1

Answer №1

Discovery :

Upon observation, it was noted that there is no object in the list array with the key bar. It is suggested to use data.foo instead of data.bar.

Recommendations :

Whenever possible, it is advisable to include a :key with v-for.
Include a loading property in each object within the list array. This will enable dynamic behavior when setting the value for onClick.

Experience Live Demo :

new Vue({
  el: '#app',
  data: {
    list: [{ foo: 'bar', loading: false }]
  },
  methods: {
    handleClick(dataIndex) {
      this.list[dataIndex].loading = true;
      setTimeout(() => {
        this.list[dataIndex].loading = false;
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(data, index) in list" :key="index">
      {{ data.bar }}
      <button @click="handleClick(index)">
        <div v-if="data.loading">
          Loading Start
        </div>
        <div v-else> Loading Finish </div>
      </button>
    </div>
</div>

Answer 2

Discovery :

Upon observation, it was noted that there is no object in the list array with the key bar. It is suggested to use data.foo instead of data.bar.

Recommendations :

Whenever possible, it is advisable to include a :key with v-for.
Include a loading property in each object within the list array. This will enable dynamic behavior when setting the value for onClick.

Experience Live Demo :

new Vue({
  el: '#app',
  data: {
    list: [{ foo: 'bar', loading: false }]
  },
  methods: {
    handleClick(dataIndex) {
      this.list[dataIndex].loading = true;
      setTimeout(() => {
        this.list[dataIndex].loading = false;
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(data, index) in list" :key="index">
      {{ data.bar }}
      <button @click="handleClick(index)">
        <div v-if="data.loading">
          Loading Start
        </div>
        <div v-else> Loading Finish </div>
      </button>
    </div>
</div>

Answer 3

Answer №2

Ensure to apply ref on your list variable for it to be reactive. Additionally, you are trying to access a dataset variable that is not defined in your application.

Here's a method to address this issue by adding extra data to your list.


<script setup>
import {ref} from 'vue'

let list = ref([{ foo: 'bar', loading: 'true'}]);

const handleClick = (data) => {
    setTimeout(() => {
      data.loading = 'false'
    },1000);
};

</script>

<template>

    <div v-for="data in list" >
      {{ data.foo}}
      <button @click="handleClick(data)"> //you can also use a `ref` here.
        <div v-if="data.loading === 'true'">
          Your Loader Component
        </div>
        <div v-else> 
          Something else...
        </div>
      </button>
    </div>
</template>

For more information, refer to Template Refs documentation

Answer 4

Ensure to apply ref on your list variable for it to be reactive. Additionally, you are trying to access a dataset variable that is not defined in your application.

Here's a method to address this issue by adding extra data to your list.


<script setup>
import {ref} from 'vue'

let list = ref([{ foo: 'bar', loading: 'true'}]);

const handleClick = (data) => {
    setTimeout(() => {
      data.loading = 'false'
    },1000);
};

</script>

<template>

    <div v-for="data in list" >
      {{ data.foo}}
      <button @click="handleClick(data)"> //you can also use a `ref` here.
        <div v-if="data.loading === 'true'">
          Your Loader Component
        </div>
        <div v-else> 
          Something else...
        </div>
      </button>
    </div>
</template>

For more information, refer to Template Refs documentation

Show or hide a component based on a mouse click in Vue JS

Answer №1

Answer №2

Similar questions

What is the best way to incorporate an if else condition using the <?php if($loggedin): ?> statement within JavaScript code to display a button push or pop response from the server side?

Ways to update the entire MobX observable array with new values

Concentrating on div elements using React

When debugging in ASP MVC4, JavaScript will only evaluate HiddenFor once you've paused to inspect it

Oops! There was a validation error as the duration was not formatted as a number. Please make sure to provide a valid numerical value for the duration field

Troubleshooting the Google OAuth 2.0 SAMEORIGIN Issue

Trying to bring in components from directories above

Select elements from a PHP loop

Are you seeing a 'Connection refused! Is the selenium server started?' error while running VueJS Nightwatch E2E tests with ChromeDriver and Chrome?

When using Axios to GET from a local PHP file, it only retrieves the code instead of running

I can't figure out why I keep receiving the InvalidArgumentError for H.Map with Argument #0 [object Object]

Integrating webpack with kafka-node for seamless communication between front

`A straightforward technique for establishing client-server communication using NodeJS`

How can I revert a date format using date-fns?

Creating new rows dynamically with jQuery

Is it possible to exclude certain static files from being served in express.static?

Sketch the borders of the element (animated)

Adjust the jQuery and PHP script to retrieve both the ID and text content to populate an OPTION element

Nullify the unfulfilled fetch call

AngularJS enables you to easily manipulate image width and height using the ng-file-upload feature