[Vuejs]-How to put content under certain headings

by

0👍

Here’s a one-page example of a way to use axios with Vue.js to get some simple content on the page. Does this help you get started?

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

Update:

For your specific example, could you go through the list of headers again and match the name property with the content name property, and then display the content? Like so:

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

Leave a comment