Currently, I am diving into the world of vuejs and harnessing the power of Laravel for the backend API. Within my project, I have set up tables named articles and articles_translations, where their relationships are defined in their respective models.
For the articles table, I went ahead and created a Vue component to handle its display:
<template>
<div>
<div v-for="article in articles" :key="article.articles">
<h4>{{article.translations}}</h4>
</div>
</div>
</template>
<script>
import axios from 'axios'
import { mapGetters } from 'vuex'
export default {
layout: 'basic',
computed: mapGetters({
locale: 'lang/locale'
}),
data: function () {
return {
articles: []
}
},
mounted() {
var app = this;
console.log(this.locale);
axios.get('/api/articles')
.then(response => {
// JSON responses are automatically parsed.
this.articles = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
The data retrieved is displaying as expected: [ { "id": 1, "article_id": 1, "title": "This is an example title", "subtitle": "this is a subtitle", "content": "this is the content", "locale": "en", "created_at": null, "updated_at": null } ]
https://i.sstatic.net/WT6XV.png
My goal now is to format the article display in the following manner:
- article title article
- article subtitle
- article content
In Blade, I typically use {{ $article->article_translations->title }} to fetch related table data. How can I achieve this functionality in Vue? How do I format the data to meet the desired output?