I am currently working on a VueJs app resembling an auction, with the backend powered by Laravel. Everything runs smoothly when I test it on Chrome, but for some reason, Safari seems to be giving me trouble.
The app consists of two main components:
- DealerAuction.vue
- Timer.vue (nested within DealerAuction)
DealerAuction Component:
<template>
<div class="flex flex-col items-center b p-10 rounded shadow-lg bg-white">
// Content omitted for brevity
</div>
</template>
<script>
import Timer from "./Timer.vue";
export default {
name: "DealerAuction",
components: {
Timer,
},
props: ["id", "bidder_id", "starting", "ending"],
data() {
// Data configuration and methods definition
},
};
</script>
Below is the code snippet for Timer.vue:
<template>
<div>
// Code for displaying timer and status messages
</div>
</template>
<script>
export default {
props: ["auction", "trans", "endedParent", "beforeParent", "runningParent", "starttime", "endtime"],"`),
data: function () {
// Initializing data properties
},
</script>
<style>
// Component styling goes here
</style>
No errors are showing up in the console related to these components, yet Safari seems to have trouble rendering them correctly.
If anyone has insights or solutions, please share. I'm at a loss and would appreciate any assistance.
Thank you all for your help!