I am having a problem converting my files to a vue component. I want my website to function the same way but using vite on a vue 3 project (with axios). I think I should add vue directives like v-if or v-for but I don't know where. I want to know how I could convert all this data to make it into vue components but act the same way as these files do on a website.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movies</title>
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>
<script src="./script.js" defer></script>
</head>
<body>
<h1 class="title"> Choose a movie from the dropdown <br> menu and press Get for movies: </h1>
<div class="selector">
<select name="Movies" id="movieselect">
<option value="">Choose a Movie:</option>
<option value="divergent">Divergent</option>
<option value="the adam project">The Adam Project</option>
<option value="batman">Batman</option>
<option value="superman">Superman</option>
<option value="starwars">Starwars</option>
<option value="hunger games">Hunger Games</option>
<option value="the maze runner">The Maze Runner</option>
<option value="spiderman">Spiderman</option>
<option value="bird box">Bird Box</option>
<option value="don't look up">Don't Look Up</option>
</select>
<button class="button" onclick="getMovies1()"> Get </button>
<div id="movieInfo">
</div>
</div>
</body>
</html>
CSS:
h1 {
color: black;
text-align: center;
font-size: 65px;
font-family:'Times New Roman', Times, serif
}
body {
background-color: lavender;
text-align: center;
font-size: 20px;
}
p {
color: black;
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif
}
img {
width: 200px;
aspect-ratio: 2 / 3;
}
iframe {
aspect-ratio: 16 / 9;
height: 300px;
}
JavaScript:
const getData = async (url, params) => {
try {
return await axios.get(url, params);
} catch (error) {
console.log(error);
}
};
const getMovies1 = async () => {
let movieInfo= document.getElementById("movieInfo");
movieInfo.innerHTML="";
let selectedMovie = document.getElementById("select")
const movieData = await getData ("https://api.themoviedb.org/3/search/movie", {
params: {
api_key: "c6b2390c3ab4bfbd0e064d952df483c9",
query: selectedMovie.value,
}
});
if (movieData.data.results.length < 1) {
return;
}
let movie= movieData.data.results[0];
const extraData = await getData(`https://api.themoviedb.org/3/movie/${movie.id}`, {
params: {
api_key: "c6b2390c3ab4bfbd0e064d952df483c9",
append_to_response: "videos",
}
});
const trailer = extraData.data.videos.results.filter((video) => video.type === "Trailer").at(0).key;
const p = document.createElement('p');
const img = document.createElement('img');
const iframe = document.createElement('iframe');
p.innerHTML = `${movie.title} -- ${movie.overview} -- ${movie.release_date}`;
img.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`
iframe.src = `https://www.youtube.com/embed/${trailer}`
info.append(p);
info.append(img);
info.append(iframe);
}
;
getMovies1();
you can create Vue Component:
You can read here https://snipcart.com/blog/vue-component-example-tutorial
About v-if or v-for, you can read here https://vuejs.org/guide/essentials/conditional.html