在vuejs中显示相关的表数据

Question

我正在学习vuejs并使用laravel作为后端api。我有以下表格

文章，articles_translations和我在他们的模型中提到了他们的关系

我为文章创建了一个vue组件

<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>

这显示[{“id”：1，“article_id”：1，“title”：“这是一个示例标题”，“副标题”：“这是一个副标题”，“内容”：“这是内容”， “locale”：“en”，“created_at”：null，“updated_at”：null}]如预期的那样

我想以这种格式显示文章

1. 文章标题文章
2. 文章副标题
3. 文章内容

在刀片中，我通常会{{$ article-> article_translations-> title}}来获取相关的表数据。这是如何工作的？如何以我提到的格式显示数据。

Answer 1

根据您发布的内容判断，您可以获得这样的文章翻译属性：

<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循环，因为您的翻译是在一个数组中。然后只需显示属性。

Answer 2

只需使用Laravel查询构建器，内部联接将有助于您的问题这是一个快速示例，然后您将收到属性或对象的集合。

解释：users表获取一个User对象，people表与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);