我正在学习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 contentIn 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.
更多推荐
articles,文章,locale,data,vue,电脑培训,计算机培训,IT培训"/> <meta name="d
发布评论