将 Asp.net core Page Modal 对象转换为 Vue,js 数据对象答案

【问题标题】：Convert Asp.net core Page Modal object to Vue,js data object将 Asp.net core Page Modal 对象转换为 Vue,js 数据对象
【发布时间】：2023-04-09 14:42:01
【问题描述】：

我正在尝试将 Asp.netcore Razor Pages 和 Vue.js 混合在一个项目中，其中返回的页面模式将包含数据，而 Vue 控制器将使用该数据进行客户端渲染和其他 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>

【问题讨论】：

This is not working 是什么意思？你是用 Chrome DevTools 来检查 js 是否有错误还是 @Json.Serialize(Model.questionViewModals) 的结果？渲染页面的实际结果是什么？
是的，它不起作用，@hardik 回答解决了这个问题。但不知道为什么

标签： javascript vue.js asp.net-core

【解决方案1】：

这是一个工作代码，您可以参考：

@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

【讨论】：

【解决方案2】：

不确定 ASP.net -- 但尝试将 @Json.Serialize(Model.questionViewModals) 这段代码移动到 created 挂钩。

<script>

var vueApp = new Vue({
    el: '#app',
    created() {
        this.questionViewModals = @Json.Serialize(Model.questionViewModals);
    },
    data: {
        questionViewModals: null
    }
})
</script>

【讨论】：