如何在我的 Vue 3 应用程序中解决这个与 roue 相关的问题?

问题描述 投票:0回答:0

我一直在使用 Vue 3、TypeScript 和电影数据库 (TMDB) 开发 SPA。

我目前正在研究一个搜索功能,我发现它有一个错误。

我在

src\components\TopBar.vue
中有“搜索框”:

<template>
   <form class="search_form w-100 mx-auto mt-2 mt-md-0">
    <div class="input-group">
      <input v-on:keyup="debounceMovieSearch" v-model="searchTerm" class="form-control search-box" type="text" placeholder="Search movies...">
      <div class="input-group-append">
        <button class="btn" type="button">
          <font-awesome-icon :icon="['fas', 'search']" />
        </button>
      </div>
    </div>

    <div v-if="isSearch" @click="isSearch = false" class="search-results shadow-sm">
      <div v-if="this.movies.length">
        <router-link v-for="movie in movies.slice(0, 10)" :key="movie.id" :to="`/movie/${movie.id}`">
          <SearchItem :movie="movie" />
        </router-link>
      </div>

      <div v-else>
        <p class="m-0 p-2 text-center">No movies found for this search</p>
      </div>
    </div>
  </form>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import axios from 'axios';
  import env from '../env';
  import SearchItem from './SearchItem.vue';

    export default defineComponent({
        name: 'TopBar',

    components: {SearchItem},

    data() {
      return {
        isSearch: false,
        searchTerm: '',
        timeOutInterval: 1000,
        movies: []
      }
    },

    methods: {
      debounceMovieSearch() {
        setTimeout(this.doMovieSearch, this.timeOutInterval)
      },

      doMovieSearch() {
        if (this.searchTerm.length > 2) {
            this.isSearch = true;
            axios.get(`${env.api_url}/search/movie?api_key=${env.api_key}&query=${this.searchTerm}`).then(response => {
            this.movies = response.data.results;
          })
          .catch(err => console.log(err));
        }
      },
    }
});
</script>

src\components\SearchItem.vue
我有:

<template>
  <span class="movie-poster">
    <img :src="moviePoster" :alt="movie.title" />
  </span>
  <span class="movie-title">{{ movie.title }}</span>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "SearchItem",

  props: {
    movie: {
      type: Object,
      required: true,
    },
  },

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

  computed: {
    moviePoster() {
      return !this.movie["poster_path"]
        ? this.genericMoviePoster
        : `https://image.tmdb.org/t/p/w500/${this.movie["poster_path"]}`;
    },
  },
});
</script>

src\router\index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import HomeView from '../views/HomeView.vue';
import TopRatedMoviesView from '../views/TopRatedMoviesView.vue';
import MovieDetailsView from '../views/MovieDetailsView.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/top-rated',
    name: 'top_rated',
    component: TopRatedMoviesView
  },
  {
    path: '/movie/:id',
    name: 'movie_details',
    component: MovieDetailsView
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

堆栈闪电战

我整理了一个Stackblitz

问题

单击搜索框下的其中一个搜索结果时(如屏幕截图所示),如果在主页或评分最高的路径上,我只会被定向到电影详细信息

如果我已经在电影详细信息页面上,当我单击其中一个搜索结果时,我不会按预期重定向(到新电影)。

问题

  1. 我做错了什么?
  2. 解决这个问题最可靠的方法是什么?
javascript vue.js vuejs3
© www.soinside.com 2019 - 2023. All rights reserved.