0

Как Вы заставляете перезагружать представление Vue3?

Вот мой код:

<template>
  <div>
    <h1>{{ category.name }}</h1>
    <div v-for="video in videos.results" :key="video">
      <router-link :to="{ name: 'Video', params: { id: video.id }}">{{ video.name }}</router-link>
    </div>
  </div>
</template>

<script>
  // eslint-disable-next-line no-unused-vars
  // @ is an alias to /src
  //
  import VideoService from '@/services/VideoService.js';

  // import axios from "axios"

  export default {
    name: 'Videos',
    components: {

    },

    data() {
      return {
        category: {},
        videos: []
      }
    },

    created() {
      this.getOneCategory();
      this.getVideosByCategory();
    },

    methods: {
      async getOneCategory() {
        VideoService.getOneCategory(this.$route.params.id)
        .then(
          (category => {
            this.category = category;
          })
        );
      },

      async getVideosByCategory() {
        VideoService.getVideosByCategory(this.$route.params.id)
        .then(
          (videos => {
            this.videos = videos;
          })
        );
      }
    }
  }
</script>

Задача перерендерить представление если this.$route.params.id измениться.

Как мне такое сделать?

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 6 окт 2021 в 5:31

1 ответ 1

0

Я добавил атрибут key в компонент router-view с маршрутом.

Получилось вот так:

<router-view :key="$route.fullPath" />

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.