在vuejs中显示相关的表格数据(Displaying related table data in vuejs)

在vuejs中显示相关的表格数据(Displaying related table data in vuejs)

我正在学习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>

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

我想以这种格式显示文章

文章标题文章 文章副标题 文章内容

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

I'm learning vuejs and using laravel for the backend api. I have the following tables

articles, articles_translations and i mentioned their relations in their models

i created a vue component fpr articles

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

this displays [ { "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 } ] as expected

I want to display the articles in this format

article title article article subtitle article content

In blade i normally do {{ $article->article_translations->title }} to fetch related table data. How does this work in vue? How to display the data in the format i mentioned.

最满意答案

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

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

基本上添加另一个循环，因为你的翻译是在一个数组中。 然后只需显示属性。

Judging by what you posted you could get the article translation attributes like this:

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

Basically add another for loop, since your translations are in an array. And then simply display the attributes.