[Vuejs]-Vue.js The list of mp3 files has already been stored in an array, but the sound still won't play

by

0👍

The problem with your code is that the "onMounted" hook is called twice.
The first time it is called outside the range function and the second time it is called inside.
To fix this, you need to move the audioRef and isPlaying variables and the onMounted hook that references them out of the interval function.
So the hook is only registered once and the audioRef and isPlaying variables are accessible by both the interval function and the hook.

Here the code:

<script>
import { ref, onMounted, computed } from 'vue';
import axios from 'axios';

const setup = () => {
  // Define reactive references to store data from API requests
  const collection1Data = ref([]);
  const collection2Data = ref([]);
  const finalData = ref([]);
  const latestfinalData = ref([]);

  // Function to fetch data from two API endpoints
  const fetchData = async () => {
    try {
      // Use Promise.all to make concurrent API requests
      const [collection1Response, collection2Response] = await Promise.all([
        axios.get('https://koh-abx.com:50100/onboardshows'),
        axios.get('https://koh-abx.com:50100/onboardlands'),
      ]);
      // Update the reactive references with API response data
      collection1Data.value = collection1Response.data;
      collection2Data.value = collection2Response.data;
    } catch (error) {
      // Log any errors to the console
      console.error(error);
    }
  };

  // Function to combine data from two API endpoints and filter unique values
  const combineData = () => {
    // Combine data from two API endpoints
    finalData.value = [...collection1Data.value, ...collection2Data.value];

    // Use Map to store unique data
    const uniqueData = new Map();
    finalData.value.forEach(doc => {
      const existingDoc = uniqueData.get(doc.idshow);
      if (existingDoc) {
        // If the document with the same idshow exists in the Map, update it with latest data
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: existingDoc.updatedAt > doc.updatedAt ? existingDoc.numbershow : doc.numbershow,
          ab: existingDoc.updatedAt > doc.updatedAt ? existingDoc.ab : doc.ab,
          updatedAt: existingDoc.updatedAt > doc.updatedAt ? existingDoc.updatedAt : doc.updatedAt
        });
      } else {
        // If the document with the same idshow does not exist in the Map, add it
        uniqueData.set(doc.idshow, {
          idshow: doc.idshow,
          numbershow: doc.numbershow,
          ab: doc.ab,
          updatedAt: doc.updatedAt
        });
      }
    });

    // Convert Map values to an array
    finalData.value = [...uniqueData.values()];
    // Sort the array by updatedAt in descending order and store only the latest 10 items
    latestfinalData.value = finalData.value.sort((a, b) => a.updatedAt > b.updatedAt ? -1 : 1).slice(0, 10);
};

// Call the fetchData function on component mount
onMounted(fetchData);

// Use computed to watch for changes to collection1Data and collection2Data and call combineData
computed(() => {
 combineData();
});

return {
 collection1Data,
 collection2Data,
 finalData,
 latestfinalData,
 fetchData
 };
};

export default {
setup
};
</script>

I took the liberty of making some optimizations to the code

Leave a comment