Привет, я делаю вызов get в магазине js и передаю его как вычисленное свойство в Movie.vue. Когда я обновляю страницу, я получаю реальное значение, если я изменяю представление или возвращаюсь к индексу, значение будет без изменений останется прежним. Каждый раз, когда мне нужно обновить страницу, чтобы получить доступ к новому значению из магазина js.
<template>
<div >
<Navbar />
<v-parallax
dark
src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
>
<v-layout
align-center
column
justify-center
>
<h1 class="display-2 font-weight-thin mb-3">{{film_title}}</h1>
<h4 class="subheading">{{film_tagline}}</h4>
</v-layout>
</v-parallax>
<v-container fluid>
<v-layout row>
<v-flex xs10 sm6 md4 lg3 offset-sm1 style="position:absolute; top:350px;">
<v-card>
<v-img
:src="'https://image.tmdb.org/t/p/original' + film_poster_path"
aspect-ratio=".75" style="background-image-width:300px;"
></v-img>
<v-card-title primary-title>
<div>
<h5 xs12 sm6 >
<v-chip color="orange" text-color="white" v-if="film_genres_1">
{{film_genres_1}}
<v-icon right>star</v-icon>
</v-chip>
<v-chip color="primary" text-color="white" v-if="film_genres_2">
{{film_genres_2}}
<v-icon right>star</v-icon>
</v-chip>
<v-chip color="green" text-color="white" v-if="film_genres_3">
{{film_genres_3}}
<v-icon right>star</v-icon>
</v-chip>
<v-chip color="red" text-color="white" v-if="film_genres_4">
{{film_genres_4}}
<v-icon right>star</v-icon>
</v-chip>
<v-chip label color="pink" text-color="white" v-if="film_production">
<v-icon left>label</v-icon>Produce by: {{film_production}}
</v-chip>
<v-chip label color="secondary" text-color="white" v-if="film_release_date">
<v-icon left>label</v-icon>Release date: {{film_release_date}}
</v-chip>
<v-chip color="primary" text-color="white">Run time: {{film_runtime}} minutes</v-chip>
</h5>
</div>
</v-card-title>
</v-card>
</v-flex>
<v-flex xs7 offset-xs5>
<v-expansion-panel
expand
>
<v-expansion-panel-content
v-for="(item, i) in 1"
:key="i"
>
<template v-slot:header>
<div>Overview</div>
</template>
<v-card>
<v-card-text class="grey lighten-3">{{film_overview}}</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
<vue-plyr>
<div class="plyr__video-embed" :key="$route.fullPath">
<iframe
:src="'https://www.youtube.com/watch?v=' +video_key"
allowfullscreen allowtransparency allow="autoplay">
</iframe>
</div>
</vue-plyr>
</v-flex>
<div class="loading" v-if="loading"><fingerprint-spinner/></div>
</v-layout>
</v-container>
</div>
</template>
<script>
import Navbar from '../components/Navbar'
import axios from "axios"
export default {
components:{
Navbar,
},
created() {
this.$store.dispatch("fetchData");
},
computed:{
video_key() {
return this.$store.state.video_key
}},
data () {
return {
loading:true,
componentKey: 0,
movie_key:null,
fun:true,
film_poster_path:null,
film_title:null,
film_tagline:null,
film_overview:null,
film_genres:null,
film_genres_1:null,
film_genres_2:null,
film_genres_3:null,
film_genres_4:null,
film_production:null,
film_release_date:null,
film_runtime:null,
film_key:null,
// video_key:null,
m_id:this.$route.params.m_id
}
},
mounted() {
// axios
// .get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=&language=en-US`)
// .then(response => (
// this.film_key=response.data.results[0].key
// ))
axios
.get(`https://api.themoviedb.org/3/movie/${this.m_id}?api_key=&language=en-US`)
.then(response => (
this.loading = false,
this.film_title=response.data.original_title,
this.film_tagline=response.data.tagline,
this.film_overview=response.data.overview,
this.film_poster_path=response.data.poster_path,
this.film_genres=response.data.genres,
this.film_genres_1=response.data.genres[0].name,
this.film_genres_2=response.data.genres[1].name,
this.film_genres_3=response.data.genres[2].name,
this.film_genres_4=response.data.genres[3].name,
this.film_production=response.data.production_companies[0].name,
this.film_release_date=response.data.release_date,
this.film_runtime=response.data.runtime
// this.test=response.data.results[0].key
))
}
}
</script>
enter code here