'Linking external templates to Vue component in ASP.NET
I have an ASP. NET MVC project with Vue3 front-end. One specific Razor View is used as a Partial inside another view. I am attempting to write this partial view as a Vue component,since it s reused, but linking the .cshtml file to the template fails because of the following warnings, that actually make Vue not render any HTML in the end:
Tags with side effect ( and ) are ignored in client component templates.
[Vue warn]: Template element not found or is empty: #someid
, and i can't find a valid fix. Finally, here is some code:
//parent Vue
const parent= {
data: function () {
return {
parentData: 'some string'
}
},
methods: function () {
}
}
//parent razor View
<div id="parentRazorView">
<div>some stuff</div>
<child-component>
@Html.Partial("ChildRazorView", ChildRazorView.CreateChildViewModel("parentData"))
//this function creates child Razor View and sets .parentData in child to the value
//from parent
</child-component>
</div>
</div>
<script>
const parentInstance = Vue.createApp(parent);
parentInstance.component('child-component', child);
parentInstance.mount("#parentRazorView");
</script>
//child component
const child= {
template: '#templateid',
data: function () {
return {
parentData: null
}
},
methods: function() {
childMethod: function(){
//do something
}
}
//child Razor View
<script id="templateid" type="text/template">
<div @click="childMethod()"> {{parentData}} </div>
</script>
http://jsfiddle.net/ypb8c46d/ This is more or less my situation right now. you can see the mentioned warnings in the console.
And this is what I d like to achieve, only that my child razor view is far more complex and its contents have to be in the associated .cshtml file, thus I can't have the script template in the parent's cshtml file outside the app container as here: http://jsfiddle.net/ub7n1eqf/1/
So I guess, what I am trying to ask is how can I link the contents of a .cshtml file to a component's template as seen in the first fiddle without getting any of the above errors? As a sidenote, I am using the cdn version of Vue.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
