Я установил динамическое сопоставление маршрутов, но столкнулся с проблемой, когда хочу обновить тот же компонент.
Я прочитал, что мне нужно реализовать наблюдателя, но документация не дает слишком много деталей, и я не знаю, что поместить в наблюдателя.
Я уже пытался поместить путь в наблюдатель, но он не работает. Я новичок в Vue и никогда раньше не пользовался часами.
Вот мой код:
<template>
<div class="singleRestaurant">
<div class="aside__data" v-for="(data,index) in displayRestaurantInfo" :key="data.restaurantName">
<ul class="aside__list">
<li class="aside__name"> {{ data.restaurantName }}</li>
<li class="aside__score">
<score-app :star-number="data.averageRating"></score-app>
</li>
<li class="aside__description"> {{ data.description }} </li>
<div class="container">
<div class="row row__first">
<div class="col-6">
<li class="aside__button-read-comment">
<button-read-comments :onClick="button">
<router-link class="button-text" :to='"/read-comments/" + index'>Les avis</router-link>
</button-read-comments>
</li>
</div>
<div class="col-6">
<li class="aside__button-add-comment">
<button-add-comment :onClick="button">
<router-link class="button-text" :to='"/add-comment/" + index'>Votre avis</router-link>
</button-add-comment>
</li>
</div>
</div>
</div>
</ul>
</div>
</div>
</template>
<script>
import ButtonReadComments from '../side-components/ButtonReadComments.vue';
import ButtonAddComment from '../side-components/ButtonAddComment.vue';
import ScoreStars from '../side-components/ScoreStars.vue';
export default {
name: "single-restaurant-app",
data: function() {
return {}
},
components: {
ButtonReadComments,
ButtonAddComment,
"score-app": ScoreStars
},
methods: {
button: function() {
console.log('Working');
}
},
computed: {
displayRestaurantInfo() {
return this.$store.getters.getRestaurantInfo;
}
},
watch: {
'$route' (to, from) {
to='"/add-comment/" + index';
}
}
}
</script>
<style scoped>
.aside__list {
list-style-type: none;
margin-top: 2rem;
}
.aside__name {
font-size: 2.5rem;
font-weight: bold;
display: inline-block;
}
.aside__score {
display: inline-block;
margin-left: 1rem;
vertical-align: super
}
.aside__description {
font-size: 2rem;
}
.row__first {
margin: 0;
margin-top: 1rem;
}
.button-text {
font-size: 1.5rem;
text-decoration: none;
color: #EBEBEB;
}
</style>
Я хочу понять, как использовать часы, чтобы мои компоненты реагировали на изменения маршрута.
Благодаря.