在vuejs

Question

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

文章，articles_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.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>

显示[{＆＃34; id＆＃34;：1，＆＃34; article_id＆＃34;：1，＆＃34; title＆＃34;：＆＃34;这是一个示例标题＆＃34; ，＆＃34;副标题＆＃34;：＆＃34;这是副标题＆＃34;，＆＃34;内容＆＃34;：＆＃34;这是内容＆＃34;，＆＃34;区域设置＆＃34 ;：＆＃34; en＆＃34;，＆＃34; created_at＆＃34;：null，＆＃34; updated_at＆＃34;：null}]如预期的那样

我想以这种格式显示文章

1. 文章标题文章
2. article subtitle
3. 文章内容

在刀片中我通常会{{$ article-＆gt; article_translations-＆gt; 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);