Отображение связанных данных таблицы в vuejs
Я изучаю vuejs и использую laravel для backend api. У меня есть следующие таблицы
article, article_translations и я упомянул их отношения в их моделях
я создал компонент vue fpr статьи
<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.info(this.locale);
axios.get('/api/articles')
.then(response => {
// JSON responses are automatically parsed.
this.articles = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
это отображает [{"id": 1, "article_id": 1, "title": "Это пример заголовка", "subtitle": "this is a subtitle", "content": "this is the content", "locale": "en", "created_at": null, "updated_at": null}], как ожидалось
Я хочу отображать статьи в этом формате
- статья заголовок статьи
- подзаголовок статьи
- содержание статьи
В блейде я обычно делаю {{$ article-> article_translations-> title}}, чтобы получить данные связанной таблицы. Как это работает в vue? Как отобразить данные в указанном мною формате.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Судя по тому, что вы опубликовали, атрибуты перевода статьи могут быть такими:
<div v-for = "article in articles" :key = "article.articles">
<div v-for = "translation in article.translations">
<h4>{{ translation.title }}</h4>
{{ translation.subtitle }}
{{ translation.content }}
</div>
</div>
В основном добавьте еще один цикл for, так как ваши переводы находятся в массиве. А затем просто отобразите атрибуты.
просто используйте построитель запросов Laravel, внутреннее соединение поможет решить вашу проблему. Это быстрый пример, после чего вы получите коллекцию свойств или свой объект.
объяснение: таблица пользователей получает объект пользователя, таблица людей связана с пользователем столбцом user_id. просто нужно объединить связанные таблицы и получить этот результат 
$users = DB::table('people')
->join('users', 'users.id', '=' ,'people.user_id')
->select('users.*',
'first_name',
'last_name',
'street_address',
'city',
'state',
'contact_phone'
)->get();
return response()->json(['data' => $users], 200);
Большое спасибо. Это именно то, что я искал.