How to fetch local html file with vue.js?

user_1862808 0
Viewed 19199

I am following this example

I am trying to load a html file with vue.js and add into my template.

my attempt:

HTTML:

<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/foundation.css">
    <link rel="stylesheet" type="text/css" href="/Static/content/css/spaceGame.css">

</head>

<body>
    <div id="app">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 cell">
                    <h1>Welcome to Foundation</h1>
                </div>
            </div>
        </div>

        <div class="grid-x grid-padding-x">
            <div class="large-4 columns"></div>
            <div class="large-8 columns">
                <component :is="currentView"></component>
            </div>
        </div>

    </div>
    <!-- Footer -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="/Static/scripts/foundation.js"></script>
    <script type="text/javascript" src="/Static/scripts/what-input.js"></script>

    <script type="text/javascript" src="/Static/scripts/space.js"></script>
</body>

</html>

script:

$(function() {
    $(document).foundation()

    var myData = '../../Views/login.html';
    Vue.component('manage-posts', {
        template: myData,
    })

    Vue.component('create-post', {
        template: '#create-template'
    })

    new Vue({
        el: '#app',
        data: {
            currentView: 'manage-posts'
        }
    })

});

Errors:

above I get the following:

  • Component template requires a root element, rather than just text.

changing var myData = '../../Views/login.html';

to

 var myData = '<div>../../Views/login.html</div>';

gets rid of that error but...how do I load the actual html file?

I am new to single page applications and to vue.js, been at this for some time now and can't figure it out.

EDIT:

The html file that I am trying to load:

<div>
    <template id="manage-template">

    <form>
        <div class="sign-in-form">
            <h4 class="text-center">Sign In</h4>
            <label for="sign-in-form-username">Username</label>
            <input type="text" class="sign-in-form-username" id="sign-in-form-username">
            <label for="sign-in-form-password">Password</label>
            <input type="text" class="sign-in-form-password" id="sign-in-form-password">
            <button type="submit" class="sign-in-form-button">Sign In</button>
        </div>
    </form>
</template>
</div>

EDIT 2:

If this has any impact on answers i just want to point out: using VS-code, site is running in IIS, no node.js is used here.

single-page-application vue.js visual-studio-code iis html
3 Answers
     <div v-html="compiledHtml"></div>

data: function() {
    return {
      fileName: "terms.html",
      input: ""

    };
  },
     created() {
        this.fileName = this.$route.params.fileName;
        this.loadFile()
    }
    computed: {
        compiledHtml: function() {
          return this.input;
        }
      },
    methods: {

        loadFile() {
          axios({
            method: "get",
            url: "../../static/" + this.fileName
          })
            .then(result => {
              this.input = result.data;
            })
            .catch(error => {
              console.error("error getting file");
            });
        }
      },

This code works. The trick is in the computed variable

user_52935840
Related