[Vuejs]-Best way to load page data into div with VueJS

1👍

Based on your comments above, I think you want to change your thinking from "loading html files" to "showing different parts of the Vue component."

Here’s a basic example. I’m going to use Vue single-file component syntax, but it’s not hard to refactor for class-based components:

<template>
  <div>
    <button @click="clickedShowFirst">Show First</button>
    <button @click="clickedShowSecond">Show Second</button>
    <div v-if="showingFirst">
      This is the first section!
    </div>
    <div v-else>
      This is the second section!
    </div>
  </div>
</template>

<script>
  export default {
    data: function () {
      return {
        // We default to showing the first block
        showingFirst: true
      }
    }

    methods: {
      clickedShowFirst: function () {
        this.showingFirst = true
      },

      clickedShowSecond: function () {
        this.showingFirst = false
      }
    }
  }
</script>

You could of course make each of the v-if blocks components of their own that you import (which makes sense if they are complex themselves).

Or as suggested by Phillipe, you can use vue-router and make each of those views a different page with a different URL.

One last recommendation to leave you with, I found Jeffrey Way’s Laracasts series on Vue.js amazingly helpful when I was learning. His episode titled "Exercise #3: Tabs" is very similar to what you’re asking here.

1👍

You could use vue-router (https://router.vuejs.org/en/). In first section put the router-link (https://router.vuejs.org/en/api/router-link.html), your buttons, in second section put the router-view (https://router.vuejs.org/en/api/router-view.html).

Leave a comment