我有一个与 Vue.js 结合使用的 ASP.NET Core MVC 项目。我只使用 Vue.js 来使我的页面具有响应性。我的目标是基于 _layout.cshtml 文件中的 div 创建一个主 vue 实例,然后使用 X-Templates 创建 Vue 组件并在我的 Web 应用程序中使用它们。值得一提的是,我希望必须在自己的 .js 文件中包含 JS Vue.Component() 逻辑,因为其中一些组件将具有大量的 js 逻辑。
我遇到的问题是当我从我想要使用它们的 .cshtml 调用它们时,让 Vue 注册/识别我的组件。我发现这个 stackoverflow 帖子 link 显示了应该如何进行这项工作的逻辑,但他的示例显示了 cshtml 内的 JS 逻辑,这是我试图避免的事情,并且没有关于如何调用 vue 组件的示例来自另一页。
我得到的错误是...... [Vue warn] 组件挂载失败:模板或渲染函数未定义
技术堆栈:
这是我的主要_layout.cshtml
<div id="main-app">
@RenderBody()
</div>
@section Scripts {
<script src="@Url.Content("~/js/mainVueApp.js")"></script>
}
这是我的 mainVueApp.js
import Vue from 'vue';
import myComponent from 'testComponent';
new Vue({
el: 'main-app',
components: {
myComponent
// I also tried, thisIsMyComponent: myComponent. No luck with that either.
}
});
这是我的_vueTestComponent.csthml
@model TestViewModel
<script type="text/x-template" id="my-test-component-id">
<div class="card">
<div class="card-header"> My Test Header </div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th class="pull-right">
Test Header
</th>
</tr>
</thead>
<tbody>
<tr v-if="isShowRow">
<th class="pull-right">
Test Header AGAIN
</th>
<tr class="pull-right">
@(Html.Kendo.CurrencyTextBoxFor(m =>
m.TestProperty).HtmlAttributes(new Dictionary<string, object>{
{"id", "test-text-box"},
{"class", "textbox-input"},
{"v-model", "testTextBoxValue"}
}).Deferred()
)
</tr>
</tr>
</tbody>
</table>
</div>
</div>
</script>
@section Scripts {
<script src="@Url.Content("~/js/testComponent.js")"></script>
}
这是我的 testComponent.js
import Vue from 'vue';
import axios from 'axios';
let testComponent = Vue.Component('my-component', {
template: 'my-test-component-id',
data: function() {
return {
testTextBoxValue : 'Test Value',
isShowRow: true
}
},
methods: {
// Nothing for now....
}
});
//I tried it without default, but it doesn't work either :(
export default {
testComponent
};
这是我调用组件 TestViewForVue.cshtml 的视图
<div class="row">
<div class="col-12">
@* Call the Component *@
@* Do I need to load the .cshtml where this component lives first, as a partial view or something? *@
<my-component> </my-component>
</div>
</div>
这会稍微改变您的结构(不使用脚本 x-模板语法),但它对我有用。如果可以的话,请尝试一下。
由于您想重用此组件,因此在您的情况下全局注册它可能没问题。
此处使用模板文字,因此需要确保为 IE11 正确转译
// testComponent.js
Vue.component("my-component", {
template: `
<div class="card">
<div class="card-header"> My Test Header </div>
</div>
`,
data () {
return {}
},
// ...
})
然后在 App_Start/BundleConfig.cs 中,为全局组件创建一个包,并在 _layout.cshtml 渲染脚本上渲染该包。
// BundleConfig.cs
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/vuecomponents").Include(
"~/Scripts/VueComponents/testComponent.js"
));
}
// _layout.cshtml
@Scripts.Render("~/bundles/vuecomponents")
现在您应该能够在应用程序中的任何 .cshtml 页面上包含
<my-component />
。