I have the following code in my livewire component blade file

<span >
    {{ $status->name }}
</span>

I then render it in a table like this:

<tbody>
    @foreach($initiatives as $key => $initiative)
        <tr >
            <th >{{ $initiative->name }}</th>
            <td >{{ $initiative->ease_of_implementation }}</td>
            <td >
                <livewire:status-badge :status="$initiative->status"></livewire:status-badge>
            </td>
            <td >{{ $initiative->priority->name }}</td>
            <td >{{ $initiative->owner_id }}</td>
        </tr>
    @endforeach
</tbody>

What I'm finding is that the table renders the first two livewire components in the first and nothing in the second, then normally from the third:

When inspecting the HTML, I can also see that there are two of the component in the first . Why is it double rendering the first component and how do I fix it?

EDIT

Here is an example of what is in an initiative:

App\Models\Initiative {#1502 ▼ // resources\views/livewire/project-span.blade.php
  #connection: "mysql"
  #table: "initiatives"
  #primaryKey: "id"
  #keyType: "int"
   incrementing: true
  #with: []
  #withCount: []
   preventsLazyLoading: false
  #perPage: 15
   exists: true
   wasRecentlyCreated: false
  #escapeWhenCastingToString: false
  #attributes: array:18 [▼
    "id" => 7
    "name" => "dolores"
    "description" => "Quia et architecto ea. Sed possimus et optio quaerat veniam ratione quibusdam nam. Adipisci at quia nemo voluptas. Fugiat qui natus illum."
    "problem_statement" => "Blanditiis fugiat reiciendis dolor officia beatae voluptas dolorum. Placeat dicta est voluptatibus. Animi earum sit est et cumque eius. Fugit itaque tempore dol ▶"
    "desired_outcome" => "Qui atque esse suscipit odio quo magnam. Ipsa cumque vel omnis totam. Est doloribus optio quia est porro. Quia id qui porro totam."
    "approach_methodology" => "Accusantium ratione eveniet sint eos placeat dolor. Et quia molestias voluptatibus. Vel consectetur ut sequi itaque consectetur et iure sint."
    "target_completion" => "2022-08-01"
    "ease_of_implementation" => 2
    "project_id" => 1
    "owner_id" => 1
    "strategic_objective_id" => 3
    "status_id" => 2
    "priority_id" => 1
    "operating_location_id" => 1
    "site_id" => 1
    "tenant_id" => 1
    "created_at" => "2022-10-27 21:47:09"
    "updated_at" => "2022-10-27 21:47:09"
  ]
  #original: array:18 [▶]
  #changes: []
  #casts: []
  #classCastCache: []
  #attributeCastCache: []
  #dates: []
  #dateFormat: null
  #appends: []
  #dispatchesEvents: []
  #observables: []
  #relations: array:3 [▼
    "owner" => App\Models\User {#1531 ▶}
    "status" => App\Models\Status {#1559 ▼
      #connection: "mysql"
      #table: "statuses"
      #primaryKey: "id"
      #keyType: "int"
       incrementing: true
      #with: []
      #withCount: []
       preventsLazyLoading: false
      #perPage: 15
       exists: true
       wasRecentlyCreated: false
      #escapeWhenCastingToString: false
      #attributes: array:6 [▼
        "id" => 2
        "name" => "Active"
        "color" => "cyan"
        "tenant_id" => 1
        "created_at" => null
        "updated_at" => null
      ]
      #original: array:6 [▶]
      #changes: []
      #casts: []
      #classCastCache: []
      #attributeCastCache: []
      #dates: []
      #dateFormat: null
      #appends: []
      #dispatchesEvents: []
      #observables: []
      #relations: []
      #touches: []
       timestamps: true
      #hidden: []
      #visible: []
      #fillable: []
      #guarded: []
    }
    "priority" => App\Models\Priority {#1549 ▶}
  ]
  #touches: []
   timestamps: true
  #hidden: []
  #visible: []
  #fillable: []
  #guarded: []
}

CodePudding user response：

Livewire is most likely "losing" track of your components; it is suggested to use some sort of key. As per the docs:

<livewire:user-profile :user="$user" :wire:key="$user->id">

So, in your case:

<livewire:status-badge :status="$initiative->status" :wire:key="$initiative->id">

See if that helps with the duplication.