iis - How to fetch local html file with vue.js? -
i following this example
i trying load html file vue.js , add 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 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 following:
- component template requires root element, rather text.
changing var mydata = '../../views/login.html';
to
var mydata = '<div>../../views/login.html</div>'; gets rid of error but...how load actual html file?
i new single page applications , vue.js, been @ time , can't figure out.
edit:
the html file trying 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 has impact on answers want point out: using vs-code, site running in iis, no node.js used here.
vue provides means of asynchronously creating component. can use in case retrieve template server.
in example code, i'm going use axios retrieve template, can use whatever library prefer.
vue.component('manage-posts', function(resolve, reject){ axios.get("../../views/login.html").then(response => { resolve({template: response.data}) }) }) 
Comments
Post a Comment