UntrackedPropertyError - Glimmer.js

41 Views Asked by At

This is my first time using Glimmer. Its pretty cool and I'm just enjoying using it. That being said, I'm not really sure why but I keep getting an untracked error for the filtered property. I'd really appreciate any advice or help. :)

export default class DoggyAppGlimmer extends Component {
  @tracked dogHouse = [];
  @tracked filterValue = '';

  didInsertElement() {
    fetch('https://dog.ceo/api/breeds/list/all').then((response) => {
        return response.json();
    })
    .then((data) => {
        Object.keys(data.message).map((breed) => {
            fetch(`https://dog.ceo/api/breed/${breed}/images/random`).then((response) => {
                    return response.json();
            })
            .then((image) => {
                    this.dogHouse = [
                        ...this.dogHouse,
                        {
                            breed,
                            image: image.message,
                            filtered: false
                        }
                    ];
            });     
        });
    });
}

filterHandler(e) {
    this.filterValue = e.target.value;
    this.dogHouse = this.dogHouse.map(dog => {
        if (dog.breed.indexOf(this.filterValue) > -1) {
            return Object.assign(dog, {
                filtered: true,
            });
        } else {
            return Object.assign(dog, {
                filtered: false,
            });
        }
    });
    console.log(this.dogHouse);
 }

The Template

                <div>
                    dog house
                    <input
                        value={{filterValue}}
                        placeholder="Find a doggo"
                        onkeyup={{action filterHandler}}
                    />
                    {{#each dogHouse key="@index" as |dog|}}
                            {{#if dog.filtered }}
                            <div>
                                <h1>{{dog.breed}}</h1>
                                <img src={{dog.image}} alt={{dog.breed}} />
                            </div>
                            {{/if}}
                    {{/each}}
                </div>

my error :-(

0

There are 0 best solutions below