admin管理员组文章数量:1426058
I'm trying to implement an external template (creating an HTML page), but I can not succeed. This page is a ASP.NET MVC page that contains a Vue app.
I want to move the template section of this ponent to an external file, but whenever I do this it doesn't work.
The following (below) does work, but it's not easy to maintain or build upon due to loss of text editing features.
Vueponent('my-ponent', { template: '#my-ponent' }
This is the current code and it works perfectly:
var foo = Vueponent('foo', {
template:'
<table class="table">
<template v-for="(foo, ColName, index) in foos">
<template v-if="index % 3 == 0">
<tr>
</tr>
</template>
<th>{{ColName}}</th>
<td v-if="foo">{{foo}}</td>
<td v-else> -- </td>
</template>
</table>',
data: function () {
return {
foos: null,
NumColuns: 3
}
},
mounted() {
axios
.get('/api/account/foo/')
.then(response => {
this.foos = response.data
})
.catch(error => {
console.log(error1)
this.errored = true
})
.finally(() => this.loading = false)
}
});
var foo = new Vue({
el: '#foo-vue'
});
I'm trying to implement an external template (creating an HTML page), but I can not succeed. This page is a ASP.NET MVC page that contains a Vue app.
I want to move the template section of this ponent to an external file, but whenever I do this it doesn't work.
The following (below) does work, but it's not easy to maintain or build upon due to loss of text editing features.
Vue.ponent('my-ponent', { template: '#my-ponent' }
This is the current code and it works perfectly:
var foo = Vue.ponent('foo', {
template:'
<table class="table">
<template v-for="(foo, ColName, index) in foos">
<template v-if="index % 3 == 0">
<tr>
</tr>
</template>
<th>{{ColName}}</th>
<td v-if="foo">{{foo}}</td>
<td v-else> -- </td>
</template>
</table>',
data: function () {
return {
foos: null,
NumColuns: 3
}
},
mounted() {
axios
.get('/api/account/foo/')
.then(response => {
this.foos = response.data
})
.catch(error => {
console.log(error1)
this.errored = true
})
.finally(() => this.loading = false)
}
});
var foo = new Vue({
el: '#foo-vue'
});
- #my-ponent means the template is inside the HTML on that page. From your explanation it isn’t clear if the Vue code is on that page or some other file or what exactly. Could you clarify exactly what file has what in them? – Sami Kuhmonen Commented Jun 28, 2019 at 18:25
- I think he has everything in one JS file, including the template and he's referencing that from a HTML page. he wants to have the template in a separate file. – Ryan Ternier Commented Jul 2, 2019 at 21:16
- All my code is on the JS page, and I would like to separate it to an HTML page (template). – Maykulino Commented Jul 3, 2019 at 21:19
3 Answers
Reset to default 3 +25To fetch the HTML template from a file you need a async ponent.
Documentation: https://v2.vuejs/v2/guide/ponents-dynamic-async.html
In your example fetch the HTML and return the promise in the Vue.ponent factory.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://unpkg./vue"></script>
</head>
<body>
<div id="app">
<foo></foo>
</div>
<script>
var foo = Vue.ponent('foo', () => {
return fetch('/template.html')
.then((response) => response.text())
.then((html) => {
return {
template: html,
data: function () {
return { foos: null, NumColuns: 3 }
},
mounted() {
this.foos = [{ foo: 1, ColName: "A" }];
// axios.get('/api/account/foo/').then(response => {
// this.foos = response.data
// })
// .finally(() => this.loading = false)
}
};
});
});
var foo = new Vue({
el: '#app'
});
</script>
</body>
</html>
template.html
<table class="table">
<template v-for="(foo, ColName, index) in foos">
<template v-if="index % 3 == 0">
<tr>
</tr>
</template>
<th>{{ColName}}</th>
<td v-if="foo">{{foo}}</td>
<td v-else> -- </td>
</template>
</table>
The best thing you can do is configure an entire Vue project, so you can use .vue template files. I recently found an article that explains in detail how to achieve this, but it's specifically aimed at browser extensions. The steps you have to undertake to achieve it, in this case, are identical for the most part, so I'll just link the article here anyway: https://medium./javascript-in-plain-english/how-i-built-a-browser-extension-with-vue-part-2-2c4ab2dd752d.
Basically what's happening is, you'll configure the Vue project yourself with Webpack to pile the Vue files into one app.js file, which you'll then reference in your file (in the tutorial this file is his app.html). It will then inject its ponents into the #app element and handle all virtual DOM manipulations.
If your view is a razor .cshtml template then you can just extract your template to a html file and load that file to your ASP.NET MVC view as raw html code since Vue template is valid html:
<!-- in cshtml view -->
<script id="my-ponent" type="text/x-template">
@Html.Raw(File.ReadAllText(Server.MapPath("~/Path/To/Template/my-ponent-template.html")))
</script>
And in your Vue ponent it should work with template: '#my-ponent' as you mentioned.
Docs: Vue: Edge Cases
P.S. You can prepare a partial view for your ponents or create some extension method to make code more readable and add some caching.
本文标签： javascriptProblem with template implementation (VUE) using NET (MVC)Stack Overflow
版权声明：本文标题：javascript - Problem with template implementation (VUE) using .NET (MVC) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745440830a2658440.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论