javascript - 在vuejs中显示相关表数据

Question

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

articles、articles_translations 和 i 在他们的模型中提到了它们的关系

我创建了一个 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>

这显示 [ { "id": 1, "article_id": 1, "title": "这是一个示例标题", "subtitle": "这是一个副标题", "content": "这是content", "locale": "en", "created_at": null, "updated_at": null } ] 按预期

我想以这种格式显示文章

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

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

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 循环，因为您的翻译位于数组中。然后简单地显示属性。