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

Question

我正在尝试在一个项目中混合 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>

标签： javascriptvue.jsasp.net-core

Answer 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>
 }

结果

你可以从这里下载 Vue.js