Open
Description
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
Labels
No labels