I am in the process of enhancing a rather basic vue component by transferring more of the code (originally written in razor) into the component itself to increase modularity.
Currently, the component functions more as a container where razor iterates through a list of communities and generates HTML server-side. This generated HTML is then passed through a slot into the component for styling.
My goal is to minimize the code rendered by razor and instead migrate as much logic as possible into the component. While vue offers looping mechanisms like v-for, I'm unsure of the best way to pass data into the component to utilize it effectively.
Since I am new to vue, like many others, I am still learning how to transfer server-side data to components. I've experimented with creating props, but the complexity of the data being produced has posed a challenge for me. I am hoping someone can provide guidance on the most efficient approach to solving this issue!
Thank you in advance!
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>
CommunityList.vue
<template>
<section class="community-list">
<slot></slot>
</section>
</template>
<script>
export default {
name: 'CommunityList',
};
</script>
<style lang="scss" scoped>
-- styling here --
</style>
Update
------
To provide further clarification:
If it is deemed appropriate, I aim to extract the HTML from the razor loop out of the slot and embed it into the component. The objective is to eliminate the slot entirely, and utilize the data from razor to populate the HTML in the component with the returned values from razor.
It appears that relocating more HTML and logic into the component would be advantageous.
Possibly something like:
index.cshtml:
@foreach (var region in regions) {
var foo = region.foo;
var bar = region.bar;
}
<community-list foo="@foo" bar="@bar"></community-list>
CommunityList.vue
<template>
<section v-for="region in regions">
<p>{{ foo }}</p>
<p>{{ bar }}</p>
</section>
</template>
I am uncertain of the most appropriate vue-centered approach. If I convert the razor to generate a list of variables to utilize as shown above, how can I pass that data into the component and loop through it within the vue component itself (similar to the example above)? In the provided case, this may not work, but I believe there must be a way to achieve the desired outcome somehow?
(Or perhaps I am approaching this problem incorrectly altogether?)