Javascript 如何将razor循环转换为Vue.js组件？

我尝试使用一个非常愚蠢的vue组件，并将更多的代码（用razor编写）移动到组件本身中（以使其尽可能模块化）

目前，该组件更像是一个容器，razor在其中循环浏览社区列表并呈现一些html服务器端。然后将该html通过一个插槽传递到组件中并设置样式

理想情况下，我希望找到一种通过razor只渲染最小值的方法，并将尽可能多的逻辑移到组件中。例如，我知道vue提供了一种数据循环机制（v-For），但是在这种情况下，我不太确定如何将数据以这样的方式传递到组件中以利用它

作为vue的新手（我想我们大多数人都是），我仍然掌握着将服务器端数据传递给组件的窍门。我曾尝试过制作道具，但所生成数据的复杂性让我有点不知所措。我希望这里有人能为解决这个问题的最佳方法亮一点灯

提前谢谢

index.cshtml：

<community-list>
      @foreach (var region in regions)
      {
          var regPage = region.Pages.FirstOrDefault();
          if (regPage == null)
          {
              continue;
          }
          string isActive = "";
          int communityCount = 0;
          var cities = region.Children;
          for (int i = 0; i < cities.Count; i++) {
              communityCount += cities[i].Pages.Count;
          }
          if (HttpContext.Current.Request.IsAuthenticated && !Model.IsPreview) {
              var email = HttpContext.Current.User.Identity.Name;
              isActive = CompanyName.Core.Models.Users.IsRegionSubscribed(email, region.Name) ? "active" : "";
          }
        <div class="community container primary @isActive" data-name="@region.Name">
          <figure style="background-image: url('/assets/images/@regPage.GetAttributeValue("HeroImage")');"></figure>
          <h3>@regPage.GetAttributeValue("Title")</h3>
          <p>@(communityCount.ToString()) New Home Communities</p>
          <custom-button destination="@regPage.URL" appearance="primary" type="link" size="extra-large" text="Find New Homes in @stateName"></custom-button>
        </div>
      }
    </community-list>

@foreach (var region in regions) {
  var foo = region.foo;
  var bar = region.bar;
}
<community-list foo="@foo" bar="@bar"></community-list>

@foreach（区域中的var区域）
{
var regPage=region.Pages.FirstOrDefault（）；
if（regPage==null）
{
继续；
}
字符串isActive=“”；
int communityCount=0；
var城市=地区。儿童；
for（int i=0；i
}

CommunityList.vue

<template>
  <section class="community-list">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'CommunityList',
  };
</script>

<style lang="scss" scoped>
  -- styling here --
</style>

<template>
  <section v-for="region in regions">
    <p>{{ foo }}</p>
    <p>{{ bar }}</p>
  </section>
</template>

导出默认值{
名称：“社区列表”，
};
--这里的造型--

更新

----

进一步澄清：

假设这是正确的方法，我希望将razor循环中的html从插槽中拉出，并将其放入组件中。完全移除插槽，从razor获取数据，并使用razor返回的值填充组件中的html

在我看来，我能进入组件的html和逻辑越多越好

也许是这样的：

index.cshtml：

<community-list>
      @foreach (var region in regions)
      {
          var regPage = region.Pages.FirstOrDefault();
          if (regPage == null)
          {
              continue;
          }
          string isActive = "";
          int communityCount = 0;
          var cities = region.Children;
          for (int i = 0; i < cities.Count; i++) {
              communityCount += cities[i].Pages.Count;
          }
          if (HttpContext.Current.Request.IsAuthenticated && !Model.IsPreview) {
              var email = HttpContext.Current.User.Identity.Name;
              isActive = CompanyName.Core.Models.Users.IsRegionSubscribed(email, region.Name) ? "active" : "";
          }
        <div class="community container primary @isActive" data-name="@region.Name">
          <figure style="background-image: url('/assets/images/@regPage.GetAttributeValue("HeroImage")');"></figure>
          <h3>@regPage.GetAttributeValue("Title")</h3>
          <p>@(communityCount.ToString()) New Home Communities</p>
          <custom-button destination="@regPage.URL" appearance="primary" type="link" size="extra-large" text="Find New Homes in @stateName"></custom-button>
        </div>
      }
    </community-list>

@foreach (var region in regions) {
  var foo = region.foo;
  var bar = region.bar;
}
<community-list foo="@foo" bar="@bar"></community-list>

@foreach（区域中的变量区域）{
var foo=region.foo；
var bar=region.bar；
}

CommunityList.vue

<template>
  <section class="community-list">
    <slot></slot>
  </section>
</template>

<script>
  export default {
    name: 'CommunityList',
  };
</script>

<style lang="scss" scoped>
  -- styling here --
</style>

<template>
  <section v-for="region in regions">
    <p>{{ foo }}</p>
    <p>{{ bar }}</p>
  </section>
</template>

{{foo}}

{{bar}}

我不太确定如何以vue为中心实现这一点。如果我将razor转换为像上面那样简单地列出要使用的变量列表，那么我将如何获取该数据，将其传递到组件中，并在vue组件本身中循环（类似于上面的示例）？在上面的例子中，我确信这是行不通的——但我想一定有某种方法可以实现我的想法

---

（或者我完全是以错误的方式实现的？

您必须使用razor将数据呈现到标记中，呈现到全局变量中。设置vue组件时，请使用该全局变量设置

data

函数。

也许我不太了解如何在razor中使用组件的vue循环连接到循环中。我不太确定如何以vue为中心实现这一点。如果我将razor转换为简单地吐出一个要使用的变量列表，例如：@foreach（区域中的var region）{var foo=region.foo；var bar=region.bar；}那么我将如何获取该数据，将其传递到组件中，并在vue组件内部循环？（基本上，我想将所有html从插槽中移到组件中，并用razor循环中的数据填充html中的值。）而不是这样做，而是将其作为json输出，然后在创建主Vue组件时执行：

new Vue（{data:myDataInJsonForm，.}）