Wie würde man eine Rasierschleife in eine Vue.js-Komponente konvertieren?

Question

Ich versuche, eine sehr dumme Vue-Komponente zu nehmen und mehr Code (in Rasierer geschrieben) in die Komponente selbst zu verschieben (um sie so modular wie möglich zu halten).

Momentan ist die Komponente eher ein Container, in dem der Rasierer eine Liste von Communities durchläuft und einige html serverseitig ausgibt. Dieser HTML-Code wird dann durch einen Slot in die Komponente geleitet und formatiert.

Idealerweise würde ich gerne einen Weg finden, um nur das Nötigste durch den Rasierer zu rendern, und stattdessen so viel von der Logik in die Komponente wie möglich zu bewegen. Zum Beispiel weiß ich, dass vue einen Mechanismus zum Durchschleifen von Daten bietet (v-for), aber in diesem Fall bin ich mir nicht sicher, wie ich die Daten so in die Komponente übertrage, dass ich sie ausnutzen kann.

Da es neu für vue ist (wie ich denke, dass die meisten von uns sind), habe ich immer noch den Dreh raus, serverseitige Daten an Komponenten weiterzuleiten. Ich habe versucht, Requisiten zu erstellen, aber die Komplexität der erzeugten Daten hat mich ein wenig in die Irre geführt. Ich hoffe, dass jemand hier ein wenig Licht auf den besten Weg werfen kann, dieses Problem anzugehen!

Vielen Dank im Voraus!

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> 

aktualisieren

------

Zur Klärung weiter:

Angenommen, es ist der richtige Ansatz, würde ich gerne das HTML in der Rasierklingenschleife aus dem Steckplatz ziehen und in die Komponente legen. Entfernen Sie den Steckplatz vollständig und nehmen Sie die Daten vom Rasierer und befüllen Sie den HTML-Code in der Komponente mit den Werten, die vom Rasierer zurückgegeben werden.

Es scheint mir, je mehr HTML und Logik ich in die Komponente verschieben kann, desto besser.

Vielleicht so etwas wie:

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> 

ich nicht ganz sicher bin, wie dies am besten aus einer vue-zentrierte Weise zu nähern . Wenn ich den Rasierer so umwandelte, dass ich einfach eine Liste von Vars ausspucke, die ich wie oben verwenden könnte, wie würde ich dann diese Daten nehmen, sie in die Komponente übertragen und sie innerhalb der Vue-Komponente selbst durchlaufen (etwas wie im obigen Beispiel)? Im obigen Fall bin ich mir sicher, dass das nicht funktionieren wird - aber ich stelle mir vor, dass es irgendwie einen Weg geben muss, um zu erreichen, woran ich denke?

(Oder bin ich nur diese ganz die falsche Art und Weise nähern?)

Answer 1

Sie würden die Daten in ein Etikett mit rasiermesser machen müssen, in eine globale Variable. Wenn Sie Ihre vue-Komponente einrichten, verwenden Sie diese globale Variable, um die data-Funktion einzurichten.