What are some ways I can streamline my code for copying a URL from a data array?

Within my document, you will find the following code snippets:

A snippet from script setup

const videos = ref([])

videos.value = await fetch(`https://api.themoviedb.org/3/movie/${movieId}/videos?api_key=85bdec956c0ccec9c74b7d51e525b938&language=en-US`).then(res => res.json())
console.log(videos.value.results[0].key)


const {
    key,
} = videos.value.results[0]



const frame1 = (`https://www.youtube.com/embed/${videos.value.results[0].key}`)
const frame2 = (`https://www.youtube.com/embed/${videos.value.results[1].key}`)
const frame3 = (`https://www.youtube.com/embed/${videos.value.results[2].key}`)
const frame4 = (`https://www.youtube.com/embed/${videos.value.results[3].key}`)

And a excerpt from template

<div class="items-center grid grid-cols-2 gap-10  w-[100%] h-[100%] bg-gradient-to-l from-[rgb(45,45,45)] from-[-20%] via-slate-900 via-50% to-[rgb(45,45,45)] to-[100%] blur-0">
<iframe :src="frame1" class="w-[90%] h-[100%] border-2 m-5 mt-10 rounded-lg"></iframe>
<iframe :src="frame2" class="w-[90%] h-[100%] border-2 m-5 mt-10 rounded-lg"></iframe>
<iframe :src="frame3" class="w-[90%] h-[100%] border-2 m-5 mb-10 rounded-lg"></iframe>
<iframe :src="frame4" class="w-[90%] h-[100%] border-2 m-5 mb-10 rounded-lg"></iframe>
</div>

I've made several attempts to clearly present this code, but I would greatly appreciate some assistance with this issue. As a newcomer, any guidance would be tremendously valuable.

javascripttypescriptvue.jsvuejs3tailwind-css

Answer №1

To start off, it is recommended to steer clear of using top-level async as it is still considered an experimental feature.

Next, observing changes and calculating values ensures that the user interface remains in sync at all times.

Thirdly, I assumed that the movieId is passed as a prop in order to enhance the component's reusability.

<template>
  <div
      class="items-center grid grid-cols-2 gap-10  w-[100%] h-[100%] bg-gradient-to f...

In this instance, I utilized watch to monitor any modifications to the prop value (although it's optional). Additionally, by setting immediate: true, the watcher activates upon component mounting.

Moreover, I revamped the video list to include only relevant entries. Subsequently, whenever the video list undergoes alterations, the final frames are regener...;

Lastly, I streamlined the UI codes by employing a v-for loop to reflect adjustments in the model. Examining the template reveals that a list of frames...;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch Angular checkbox to display string values instead of boolean true/false

My task is to create three checkboxes in a form with values toggling between "optin" and "optout" as I check/uncheck the checkboxes. Additionally, all checkboxes should be checked by default for the "optin" value. I'm struggling to find a solution, an ...

javascriptangulartypescriptcheckboxangular-forms

Is it possible for a Firestore query using .where() to conduct a search with no results?

Currently, I am in the process of creating a platform where users can upload past exams. Each document contains various fields such as teacher, year, and class, all stored in cloud Firestore. To filter the data by teacher, I am using the .where("Teacher" ...

typescriptfirebaseionic-frameworkgoogle-cloud-firestorequerying

Receiving an abundance of alert notifications triggered by the search functionality of jsTree

I've created a function to search for text within the jsTree framework. The goal is to highlight the node if the search text is found. If not, inform the user with a message saying "No node matching the search string, please try again." However, I&a ...

javascriptjstree

Implementing the if/shim binding in Knockout.js

In my project, I am looking to develop a unique custom binding that functions similarly to the if binding. However, instead of completely removing the element from view, I want it to be replaced with another element of equal height whenever it needs to be ...

javascriptknockout.js

I am unable to get the Javascript code `window.print()` to function

I tried creating a basic link to print a page on my website using Google Chrome, but for some reason, the link is not working. Upon checking my console log, I noticed an error message that says: Maximum call stack size exceeded Here is the HTML code I us ...

javascripthtml

Wrapper around union function in TypeScript with generics

I'm struggling to find a solution for typing a wrapper function. My goal is to enhance a form control's onChange callback by adding a console.log. Can someone please point out what I might be overlooking? interface TextInput { type: 'Tex ...

typescriptgenericsunion

Tips for utilizing the AngularJS filter to group by two columns in Angular

In my array of objects, each item has three properties: 1. name 2. team 3. age http://jsfiddle.net/HpTDj/46/ I have successfully grouped the items by team, but I am unsure how to group them by both team and age in my current code. I want to display the ...

javascriptangularjsangular-filters

Single parallax movement determined by the position of the mouse cursor, with no margins

Recently came across this interesting code snippet [http://jsfiddle.net/X7UwG/][1]. It displays a parallax effect when moving the mouse to the left, but unfortunately shows a white space when moving to the right. Is there a way to achieve a seamless single ...

javascriptjquerycsshtml

How can Next-auth handle redirection for 401 errors?

Currently, I am utilizing Next-auth in combination with rtk query. My goal is to configure the application so that whenever a request results in a 401 unauthorized error, the page will automatically redirect to the login page. How can this be achieved? I ...

javascriptnext.jsnext-authrtk-query

The combination of a modal box, checkbox, and cookie feature creates

I am trying to accomplish the following tasks: When the homepage loads, I want a modal box to appear Inside the modal box, there should be a form with a mandatory checkbox After checking the checkbox, submit the form and close the modal box to return to ...

javascriptjquerycookiescheckboxmodal-dialog

Sending the same element to a personalized filter repeatedly

Is there a better way to convert a string to a JavaScript date object before using the Angular date filter? The custom filter, stringToDate(), has been implemented and integrated into the code snippet below. <div ng-repeat="blogPost in blogPosts" class ...

javascriptangularjs

Troubleshooting React Table cell issue with MUI integration: A step-by-step guide

Having just started working with React, I decided to create a table component using React Table-MUI. However, when attempting to place my table row within <Box></Box>, an issue arose where the entire table body was only occupying the space of t ...

javascriptreactjsreact-nativereact-table

What is the syntax for inserting a text (value) into a text input field in HTML using PHP?

I'm having trouble getting the input field to populate with "Hello" when the button is clicked. I've checked for a solution, but can't seem to find one. Any help would be appreciated. Thank you. <!DOCTYPE html> <html> <head&g ...

javascriptphpinput

Having trouble retrieving data from getStaticProps

I'm currently developing a project using next.js and I am attempting to fetch a list of gyms in the getStaticProps function. Here is my code snippet: import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import { useState } ...

javascriptreactjsnext.js

Puppeteer causes Express to stop listening to incoming requests

As I work on developing a straightforward API that utilizes Puppeteer to execute actions, I encounter an issue where my Express app stops listening once Puppeteer is launched. Below is the script in question: const Apify = require('apify'); cons ...

javascriptnode.jspuppeteer

Methods for adding a line to an array

I am currently working on a loop where I need to populate my array called photos: $scope.photos = []; var str = data.data.Photos; var res = str.split('|'); angular.forEach(res, function (item) { ...

javascriptangularjs

Is there a way to automate downloading a file in Angular using the browser's built-in download feature?

When I make a request to my webservice to download a zip file, the file content is downloaded secretly and suddenly appears in the download task bar as already fully downloaded (100%). I am using the following method in Angular: const endpoint = "http:// ...

javascriptangulartypescriptstreamblob

Translate Firestore value updates into a TypeScript object

Here are the interfaces I'm working with: interface Item { data: string } interface Test { item: Item url: string } In Firestore, my data is stored in the following format: Collection Tests id: { item: { data: " ...

typescriptgoogle-cloud-firestoreangularfire2

Is it possible for an independent perl script to execute a function from a website's javascript?

Looking at this complex setup, I find myself in a situation where I must find a way to trigger the $.ajax function on a webpage using a separate Perl script. The scenario involves a webpage making $.ajax calls to a Perl file, which retrieves data and send ...

javascriptajaxperl

What is the process for retrieving the date and time a location was added to Google Maps?

My goal is to extract the date and time a location pin was added in Google Maps. For example, if I search for McDonald's in a specific area, I want to retrieve the dates and times of all McDonald's locations in that area. Is there a method to acc ...

javascriptpythongoogle-mapsgoogle-maps-api-3