Ember Octane - How to loop through model records inside a component?

Question

I have an array of strings passed as an argument to a component, inside the component I am using "each" helper to render each string in a text input. I tried the following approach.

I have a model passed as an argument to a component. I'm using #each helper to iterate through that model and this does not work.

Example:

1. Template

<div>
<Location::LocationList @model="{{@model}}"/>
</div>

2. LocationList component:

<ul class="location-list">
  {{#each this.args.model as |location|}}
    <li>
      {{@location.title}}
    </li>
  {{/each}}
</ul>

And if I just do it in this way:

<ul class="location-list">
    {{#each @model as |location|}}
      <li>
        <Location::LocationItem @location={{location}}/>
      </li>
    {{/each}}
</ul>

It works as needed. Any suggestions?

Answer 1

According to the docs on Component Arguments, using the @model as you have in your last snippet,

<ul class="location-list">
  {{#each @model as |location|}}
    <li>
      <Location::LocationItem @location={{location}}/>
    </li>
  {{/each}}
</ul>

is the correct way to reference arguments.

Referencing args via this.args is reserved for usage in the class body of a component.

the @namedArgs syntax is consistent across class-based components and template-only components as template-only components do not have a this.