Вывод json данных в vue
в консоли получаю вот такие данные
далее в этом фрагменте кода мне нужно вывести заголовок
<div v-if="reviews.length === 0">Нет обзоров для отображения.</div>
<div v-else>
<div v-for="review in reviews" :key="review.id" class="news-card">
<p class="review-meta">
Заголовок: review.title
</p>
<a :href="'/content_detail/' + review.id">Читать далее</a>
</div>
</div>
дело в том, что в ссылке есть и review.id, и review.title, но вот тут: Заголовок: review.title надо как то по правильному оформить вывод
вот полный фрагмент кода
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const reviewApp = Vue.createApp({
data() {
return {
reviews: [],
page: 1,
loading: false,
hasNext: true,
};
},
methods: {
async fetchReviews() {
if (this.loading || !this.hasNext) return;
this.loading = true;
try {
const response = await fetch(`/api/reviews/?page=${this.page}`);
const data = await response.json();
console.log('Fetched reviews:', data.reviews);
this.reviews = [...this.reviews, ...data.reviews];
this.hasNext = data.has_next;
this.page += 1;
} catch (error) {
console.error('Ошибка загрузки:', error);
} finally {
this.loading = false;
}
},
truncateWords(text, length) {
return text.length > length ? text.slice(0, length) + '...' : text;
},
handleScroll() {
if (window.innerHeight + window.scrollY >= document.documentElement.offsetHeight - 100) {
this.fetchReviews();
}
},
},
mounted() {
console.log('Vue приложение успешно смонтировано');
this.fetchReviews();
window.addEventListener('scroll', this.handleScroll);
},
beforeUnmount() {
window.removeEventListener('scroll', this.handleScroll);
},
template: `
<div v-if="reviews.length === 0">Нет обзоров для отображения.</div>
<div v-else>
<div v-for="review in reviews" :key="review.id" class="news-card">
<p class="review-meta">
Заголовок: review.title
</p>
<a :href="'/content_detail/' + review.id">Читать далее</a>
</div>
</div>
`,
});
reviewApp.mount('#review-section');
</script>