Menu
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.
491
The simplest way to get started with Vue is to grab the development version script for it and add it to the head tag of your HTML file. Then you can start Vue code inside the HTML file inside of script tags. And have the Vue code connect up with an existing element on your HTML page.
There are two ways to import a JavaScript library to the Vue Component. The first is to import a local JavaScript library. Here, you can import the JavaScript library by using the 'import' keyword inside the script tag of your Vue file. import * as mykey from '../assets/js/mykey.
Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance's data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.
Just put your <script> tag based template inside of something. html on your server. If you are using jQuery, . load should work.
Vue provides a means of asynchronously creating a component. You can use that in this case to retrieve your template from the server.
In this example code, I'm going to use axios to retrieve the template, but you can use whatever library you prefer.
Vue.component('manage-posts', function(resolve, reject){
axios.get("../../Views/login.html").then(response => {
resolve({template: response.data})
})
})
<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
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
