如何将内容放在某些标题下答案

【问题标题】：How to put content under certain headings如何将内容放在某些标题下
【发布时间】：2017-09-04 04:35:25
【问题描述】：

如何将内容放在某些标题下？我有两种加载数据的方法

第一个axios.get('/api/get/headers')

第二个axios.get('api/get/contents')

鉴于标题可能不同并且内容也相应地，我不知道这将如何正确完成

表格示例

<thead>
    <tr>
        <th v-for="header in headers" :data-key="header.name">{{ header.title }}</th>
    </tr>
</thead>
<tbody>
     <tr v-for="content in contents">
         <td :data-key="content.name"> {{content.title}}</td>
     </tr>
</tbody>

全局问题是内容可以是数组

【问题讨论】：

如果不知道您当前的输出是什么样子以及您希望它是什么样子，我们就无法为您提供帮助。
表格与我在 cmets 中描述的较低答案相同
@Marty 如何实现对象中字段名在所需列中的替换？

标签： javascript arrays vue.js

【解决方案1】：

这是一个使用 axios 和 Vue.js 在页面上获取一些简单内容的方法的单页示例。这对您开始有帮助吗？

<html>
   <head>
      <script src="http://unpkg.com/vue"></script>
      <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   </head>
   <body>
      <div id="app">
         <div class="header">{{headerText}}</div>
         <div class="content">{{contentText}}</div>
      </div>
   </body>
<script>
var vm = new Vue({
   el: "#app",
   data: function () {
      return {
         headerText: '',
         contentText: ''
      }
   },

   mounted: function () {
      axios.get("/api/get/headers").then(response => {
         this.headerText = response;
      })
      .catch(err => {
         console.log(err);
      });

      axios.get("/api/get/content").then(response => {
         this.contentText = response;
      })
      .catch(err => {
         console.log(err);
      });
   }
});
</script>

</html>

更新：

对于您的具体示例，您能否再次浏览标题列表并将名称属性与内容名称属性匹配，然后显示内容？像这样：

<thead>
    <tr>
        <th v-for="header in headers" :data-key="header.name">{{ header.title }}</th>
    </tr>
</thead>
<tbody>
     <tr v-for="header in headers">
         <td :data-key="header.name"> {{getContent(header.name).title}}</td>
     </tr>
</tbody>


<script>
...
    methods: {
        getContent(name) {
            for (var index in this.contents) {
                if (this.contents[index].name === name) {
                    return this.contents[index];
                }
            }
        }
    }
...
</script>

【讨论】：

是的，当然这部分是可以理解的，因为它已经实现并且我已经做到了）
好的，很好。我们可以为您提供什么帮助？
如果您阅读了描述，那么我需要调整表格标题上的内容
例如，在标题dataAction中我必须在此列下的内容中显示对象dataAction
“调整表格标题上的内容”这句话太模糊了，我无法回答。您能否使用一些示例 HTML 更新问题并概述您希望为其找到解决方案的一两个场景？