时间戳

首页 > 解决方案 > 在 vue.js 中渲染一个剃刀视图循环

c# - 在 vue.js 中渲染一个剃刀视图循环

问题描述

我试图弄清楚如何使用 for 循环同时呈现 html 和文本。

 <div id="container">
     <ul>
        <li v-for="item in itemDetails" :id="item.id">{{ item.result }}</li>
     </ul>
 </div>

 new Vue({
   el: "#container",
   data: {
      itemDetails: [
          { id: "firstId", result: "@Model.First" },
          { id: "secondId", result: '@foreach(var newItem in @Model.List)
              if(newItem.Index == Model.ListId)
              {
                  <option value="newItem.Index" selected>@newItem.Value</option>
              }
              else
              {
                  <option value="newItem.Index">@newItem.Value</option>
              }
           '
          }
      ]
   }
 });

第一项很好，因为它只是文本，但如果我需要将 HTML 作为第二个结果呈现，它就不起作用。我不知道如何同时做这两个。第二个项目正在呈现一个选择下拉列表，其中包含它等于被选中的项目。

标签： c#vue.js

解决方案

不要@Model在 JavaScript 中使用，而是将您的@Model转换为 JSON，然后将其传递到您的data属性中。你可以通过使用@Html.Raw(Json.Encode(Model)). 然后基于此创建一个计算属性。

data: { 
    itemModel: @Html.Raw(Json.Encode(Model))
},
computed: {
    itemDetails() {
        return this.itemModel.map(x => /* whatever you want to do here . . . */);
    }
}

推荐阅读