Question

Technologies:

javascript

vue.js

Tolerim

25 days ago

What is the solution to the roue-related issue in my Vue 3 application?

The author is working on developing a Single Page Application (SPA) using Vue 3, TypeScript, and The Movie Database (TMDB). They are currently working on a search functionality, but have encountered a bug. The search box is located in the "src/components/TopBar.vue" file, and the search results appear in a "src/components/SearchItem.vue" file. The author has provided the code for these components, as well as the "src/router/index.ts" file. The issue is that when the user is already on a movie details page and clicks on a search result, they are not directed to the new movie page as intended. The author is seeking guidance on what they are doing wrong and the most reliable way to fix the issue. The author has included a Stackblitz link for further reference.

Answers(2)

Tolerim

25 days ago

1. The issue seems to be related to the fact that the router-view is not being replaced when navigating to the same movie details route. Vue Router has a built-in mechanism to detect route changes and replace the content of the router-view component. However, this mechanism only works when navigating to different routes. 2. One way to fix this issue is by adding a watch in the movie details component that listens to route changes and reloads the component when the route id changes. Here is an example of how you can add a watch to the MovieDetailsView component:

import { defineComponent, ref, watch } from 'vue';
import axios from 'axios';
import env from '../env';

export default defineComponent({
  name: 'MovieDetailsView',

  data() {
    return {
      movie: null,
      genericMoviePoster: require('../assets/generic-poster.png'),
    };
  },

  created() {
    this.fetchMovieDetails();
  },

  watch: {
    $route(to) {
      // Reload the component only if the id changes
      if (to.params.id !== this.movie?.id) {
        this.fetchMovieDetails();
      }
    },
  },

  methods: {
    async fetchMovieDetails() {
      try {
        const response = await axios.get(
          `${env.api_url}/movie/${this.$route.params.id}?api_key=${env.api_key}`
        );
        this.movie = response.data;
      } catch (error) {}
    },
  },
});

In this example, we added a watch that listens to route changes and calls the fetchMovieDetails method only if the id parameter changes. This ensures that the component is reloaded whenever a new movie is selected, regardless of the current route.

Accepted Answer

I'm sorry but I couldn't find any relevant information to answer your question. However, I can help you with the bug you are facing. Based on the information you provided, it seems that the issue is related to routing. When a user clicks on a search result while already on a movie details page, they are not directed to the new movie page as intended. To fix this issue, you can use Vue Router's push() method to navigate to the new movie page. You can add this method in the SearchItem.vue file and call it when a user clicks on a search result. Here's an example:

<template>
  <div class="search-item" @click="goToMovieDetails(movie.id)">
    <img :src="getImageUrl(movie.poster_path)" alt="movie poster" />
    <div class="movie-info">
      <h3>{{ movie.title }}</h3>
      <p>{{ movie.release_date }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  props: {
    movie: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    const router = useRouter();

    const goToMovieDetails = (id: number) => {
      router.push({ name: 'MovieDetails', params: { id } });
    };

    return { goToMovieDetails };
  },
});
</script>

You can also check out this Stackblitz example for more reference. I hope this helps! Let me know if you have any other questions.

Sources

typescript - Vue 3 The template root requires exactly one element ...How to Build To-do App with Vue 3 Typescript - Bacancy bezkoder/vue-3-typescript-example - Github