Different boolean variable assigned to every item in v-for loop

Question

Different boolean variable assigned to every item in v-for loop

I am working on creating a custom play/pause button for my audio elements, and here is how I have implemented it:

<div v-for="(post, p) in post_list">
    <!-- ... -->
    <!-- ... -->
    <!-- ... -->
    <v-avatar v-if="!is_played" color="#663399" size="42" class="mx-2"
        @click="playMe('custom-wave-aud-'+p)"> <!-- is_played = true -->
            <v-icon dark> mdi-play </v-icon>
     </v-avatar> 

     <v-avatar v-if="is_played" color="#663399" size="42" class="mx-2"
        @click="pauseMe('custom-wave-aud-'+p)"> <!-- is_played = false-->
            <v-icon dark> mdi-pause </v-icon>
     </v-avatar> 
</div>

When the above code is executed, it switches between the pause icon and play icon when clicked. However, the issue arises as it affects all play/pause buttons for all items due to is_played being assigned globally.

I aim to make is_played impact only one item and be exclusive to the particular item where I toggle the play/pause button.

UPDATE: For reference, here is the play/pause function

playMe(c, index) {
        document.getElementsByClassName(c)[0].play();
        this.is_played = true;
    },
    pauseMe(c, index) {
        document.getElementsByClassName(c)[0].pause();
        this.is_played = false;
    },

javascript vue.js

Answer 1

Answer №1

To ensure that only the current post's button is affected when the is_played status changes, you need to reference the index of the post within is_played. Here is a simple code snippet to achieve this:

<div v-for="(post, p) in post_list" :key="p">
  <v-avatar v-if="is_played !== p"
            color="#663399"
            size="42"
            class="mx-2"
            @click="playMe('custom-wave-aud-' + p, p)">
    <v-icon dark>mdi-play</v-icon>
  </v-avatar>
  <v-avatar v-if="is_played === p"
            color="#663399"
            size="42"
            class="mx-2"
            @click="pauseMe('custom-wave-aud-' + p, p)">
    <v-icon dark>mdi-pause</v-icon>
  </v-avatar>
</div>

data: () => ({
  is_played: null
}),
methods: {
  playMe(className, index) {
    if (this.is_played !== null) {
      // pause the currently playing one first
      this.pauseMe(className, this.is_played);
    }
    this.is_played = index;
    document.getElementsByClassName(className)[0].play();
  },
  pauseMe(className, index) {
    this.is_played = null;
    document.getElementsByClassName(className)[0].pause();
  }
}

Note: If you want multiple wavs to play simultaneously, you will need to change is_playing to an array and adjust the condition to check if the current index is in the array. Remember to add/remove the index from the array when playing/pausing.

If you require further assistance, please provide a runnable minimal reproducible example.

Answer 2

To ensure that only the current post's button is affected when the is_played status changes, you need to reference the index of the post within is_played. Here is a simple code snippet to achieve this:

<div v-for="(post, p) in post_list" :key="p">
  <v-avatar v-if="is_played !== p"
            color="#663399"
            size="42"
            class="mx-2"
            @click="playMe('custom-wave-aud-' + p, p)">
    <v-icon dark>mdi-play</v-icon>
  </v-avatar>
  <v-avatar v-if="is_played === p"
            color="#663399"
            size="42"
            class="mx-2"
            @click="pauseMe('custom-wave-aud-' + p, p)">
    <v-icon dark>mdi-pause</v-icon>
  </v-avatar>
</div>

data: () => ({
  is_played: null
}),
methods: {
  playMe(className, index) {
    if (this.is_played !== null) {
      // pause the currently playing one first
      this.pauseMe(className, this.is_played);
    }
    this.is_played = index;
    document.getElementsByClassName(className)[0].play();
  },
  pauseMe(className, index) {
    this.is_played = null;
    document.getElementsByClassName(className)[0].pause();
  }
}

Note: If you want multiple wavs to play simultaneously, you will need to change is_playing to an array and adjust the condition to check if the current index is in the array. Remember to add/remove the index from the array when playing/pausing.

If you require further assistance, please provide a runnable minimal reproducible example.

Different boolean variable assigned to every item in v-for loop

Answer №1

Similar questions

Redux Persist causes the redux state to become undefined

Does this task require a high amount of CPU resources for Node.js on the back-end?

Setting the Datetimepicker to be used with every input field

What is the reason for using a callback as a condition in the ternary operator for the Material UI Dialog component?

Retrieve items from a JSON file based on the user input ID in a React project

Executing a php function upon onchange event triggered by CKEditor

Is there a way to incorporate electron methods within Svelte files, specifically in Svelte 3, or is there an alternative approach to achieve this integration?

Is there a way to dynamically alter the content depending on the index of the current slide using swiper.js?

Even after unsubscribing with mqtt.js, the old listener continues to receive messages

Issue: Unable to locate module - Unable to resolve 'core-js/modules/es.error.cause.js'

Unlocking fashion with $refs: A step-by-step guide

Angular $watch | obtaining the result from a function

What steps are involved in launching an outdated Angular project?

Unable to connect to Alpine store from an external source due to a typescript error

The Express server is failing to deliver a response to the client when using the fetch method

AngularJS is patiently anticipating the population of the scope for ng-show

GraphQL Shield throws an 'Unauthorized' error for a permitted mutation

sw-precache-webpack-plugin for webpack's default service worker template

Utilize JavaScript conditions to dynamically apply styles within your web application

Canceling a promise in a Vuex action