get urls data and split in the diffrent parts to get endpoint of file name given in last of url and show it .. by put in new array or variable by using -1

 <template>

  <div class="card" v-if="checkpw">

    <div class="card-header">

      <span class="h3 text-primary mt-4">Production Script Files</span>

    </div>

    <ul class="list-group list-group-flush" v-for="(value, index) in urls" :key="index">

      <li class="list-group-item h5">

        <i class="bi bi-file-earmark-zip-fill text-primary h3 mx-2"></i>

       <span> {{ value }} </span>

      <a :href="`https://production.brighterbins.com/production/download/${value}`" class="btn btn-primary px-3 py-2" download>Download </a> 

      </li>

    </ul>  

    <!-- @click="psFileDownload(value)" -->

  </div>

  <div v-if="errormsg" class="text-danger">

    <h5 class="pt-5 pt-5 text-danger">You are not authorized to access  this data! </h5>

  </div>

  </template>

  <script lang="ts">

  import { onMounted, ref } from "vue";

  import { setCurrentPageBreadcrumbs } from "@/core/helpers/breadcrumb";

  import { getProductionUrl } from "@/store/api/devices";

  import Swal from "sweetalert2/dist/sweetalert2.js";

  export default {

    components: {},

    setup() {

      let checkpw = ref<boolean>(false);

    let errormsg = ref<boolean>(false);

      const urls = ref([]);

      onMounted(async () => {

        setCurrentPageBreadcrumbs("Production Script", [""]);

        Swal.fire({

        title: "Enter your password",

        input: "password",

        inputLabel: "Password",

        inputPlaceholder: "Enter your password",

        inputAttributes: {

          maxlength: 10,

          autocapitalize: "off",

          autocorrect: "off",        

        },

      }).then((result) => {

        console.log(result);

        if (result.value == "smartps") {

          checkpw.value = result.isConfirmed;

        } else {  

          Swal.fire({

            icon: "error",

            title: "Oops...",

            text: "Something went wrong!",

          });

        errormsg.value = true;

        }

      });

        const result = await getProductionUrl();

         for (let i = 0; i < result.data.data.length; i++) {

          let name= result.data.data[i].split("/")

          urls.value.push(name[name.length-1]);

        }

        // console.log("result", urls.value);

      });

      const psFileDownload = async (filename) => {

      await downloadProductionFile("XUKEDNAEUKX5000STDEC22-1-3-1800.zip");

 }

// XUKEDNAEUKX5000STDEC22-1-3-1800.zip

      return {

        urls,

        checkpw,

        errormsg,

        psFileDownload

      };

    },

  };

  </script>

  

  <style scoped>

  canvas {

    display: inline-block;

    width: 100%;

    height: 123.647px !important;

    vertical-align: top;

  }

  span {

    display: inline-block;

    width: 550px;

  }

  </style>