Skip to content

Getter method is not working #13

Open
@yusuftaufiq

Description

@yusuftaufiq

Hi there, I have a problem using the getter method. It seems that the getter method doesn't work in class components.

To be clear, I have the following components:

import { AlpineComponent } from '@leanadmin/alpine-typescript';
import User from '../interfaces/user'

export default class Contact extends AlpineComponent {
  public contacts: User[] = []

  public search: string = ''

  public init(): void {
    this.contacts = [
      { id: 1, name: 'smith' },
      { id: 2, name: 'john' },
      { id: 3, name: 'doe' },
      { id: 4, name: 'jean' },
    ]
  }

  public get filteredContacts(): User[] {
    return this.contacts.filter(({ name }: User): boolean => name.includes(this.search))
  }
}

And then when used on the view using the following code:

<input x-model="search" type="text" placeholder="Search users">
<ul>
  <template x-for="contact in filteredContacts">
    <li x-text="contact.name"></li>
  </template>
</ul>

It seems that filteredContacts is always stuck with the initial value and doesn't update dynamically. Is there a way to fix this, or maybe I'm missing something?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions