Question

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

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

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

Answer 1

这是一个单页示例，介绍如何使用带有Vue.js的axios来获取页面上的一些简单内容。这有助于您入门吗？

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

更新

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

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

如何将内容置于某些标题之下

1 个答案: