Question

我试图弄清楚如何使用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渲染为第二个结果，则它不起作用。我不确定如何同时执行这两项操作。第二项是呈现一个选择下拉列表，其中等于被选中的项。

Answer 1

不要从JavaScript中使用@Model，而是将@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 . . . */);
    }
}

在vue.js中渲染剃刀视图循环

1 个答案: