我正在尝试在一个项目中混合 Asp.netcore Razor 页面和 Vue.js,其中返回的页面模式将包含数据,Vue Controller 将使用该数据进行客户端渲染和其他 UI 交互
Pagemodal.cs
public class SampleQuestionModel : PageModel
{
public List<QuestionViewModal> questionViewModals = new List<QuestionViewModal>();
public void OnGet()
{
MYEXAMAPI.Controllers.QuestionApiController questionApiController = new MYEXAMAPI.Controllers.QuestionApiController();
questionViewModals = questionApiController.GetQuestion();
}
}
这是我的 Razor,我使用页面模式来显示数据
@page
@model MYEXAM.SampleQuestionModel
@{
ViewData["Title"] = "SampleQuestion";
}
<h1>SampleQuestion</h1>
<script src="~/js/vue.js"></script>
<ul id="app">
<li v-for="item in questionViewModals">
{{ item.fullQuestions }}
</li>
</ul>
<script>
var vueApp = new Vue({
el: '#app',
data: {
questionViewModals: @Json.Serialize(Model.questionViewModals) //This is not working
}
})
</script>
最佳答案
这是一个工作代码,您可以引用:
@page
@model RazorPages3_0Test.SampleQuestionModel
<h1>SampleQuestion</h1>
<ul id="app">
<li v-for="item in questionViewModals">
{{ item.fullQuestions }}
</li>
</ul>
@section Scripts
{
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vueApp = new Vue({
el: '#app',
data: {
questionViewModals: @Json.Serialize(Model.questionViewModals)
}
})
</script>
}
结果
您可以从here下载Vue.js
关于javascript - 将Asp.net core Page Modal对象转换为Vue、js数据对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59767952/