Блог

Пожалуйста, найдите ниже упрощенный пример того, чего я пытаюсь достичь.

У меня есть большой список, обзор которого я создаю с помощью alpinejs.

Теперь я добавил фильтр, чтобы просто показать некоторые из моих элементов.

У меня также есть глобальное количество отображаемых элементов, а также глобальное количество элементов, которые есть у элементов.

В приведенном ниже примере я показываю для каждого клиента автомобили, которыми они владеют, и количество автомобилей, которыми они владеют. По всему миру я показываю количество клиентов и общее количество автомобилей.

Это работает до тех пор, пока я не отфильтрую.

Как только начинается фильтрация, глобальные цифры ведут себя странно.

Когда я начинал, у меня было 3 клиента и 5 автомобилей.

Когда я вхожу в an E , это должен быть 1 клиент и 2 машины, но он остается как 3 и 5.

Когда я удаляю E их , количество увеличивается до 8 клиентов и 12 машин.

Я уверен, что это связано с тем, что глобальные счетчики не сбрасываются до 0.

Но я не мог найти способ добиться этой перезагрузки. Любая помощь была бы очень признательна.

Пожалуйста, обратите внимание, что я знаю, что могу избежать фактического подсчета автомобилей individualcount , просто x-text="individualcount" заменив x-text="cars.length" их .

 lt;htmlgt; lt;headgt;  lt;script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"gt;lt;/scriptgt; lt;/headgt; lt;bodygt;  lt;h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"gt;lt;/h1gt; lt;div  x-data="{  search: '',    items: [  {client: {name: 'Hugo', id:'0001' }, stuff: {cars: [ 'Horch', 'Benz' ] } },  {client: {name: 'Hans', id:'0002' }, stuff: {cars: [ 'Horch' ] } },  {client: {name: 'Egon', id:'0003' }, stuff: {cars: [ 'VW', 'Maybach' ] } },  ],    get filteredItems() {  return this.items.filter(  i =gt; i.client.name.startsWith(this.search)  )  },  }" gt;  lt;input x-model="search" placeholder="Search..."gt;    lt;ul x-data="{ clientcount : 0, carcount : 0 }"gt;  lt;pgt;Number of clients: lt;span x-text="clientcount"gt;lt;/spangt;lt;/pgt;  lt;pgt;Number of cars: lt;span x-text="carcount"gt;lt;/spangt;lt;/pgt;  lt;template x-for="item in filteredItems" :key="item.client.name"gt;  lt;li x-data="{ individualcount : 0 }"  x-effect="carcount  = individualcount;   clientcount"gt;  lt;span x-text="item.client.id"gt;lt;/spangt;  lt;span x-text="item.client.name"gt;lt;/spangt;  (lt;span x-text="individualcount"gt;lt;/spangt;)  lt;ulgt;  lt;template x-for="car in item.stuff.cars" :key="car"gt;  lt;li x-text="car"  x-effect="  individualcount"gt;  lt;/ligt;  lt;/templategt;  lt;/ulgt;  lt;/ligt;  lt;/templategt;  lt;/ulgt; lt;/divgt; lt;/bodygt; lt;/htmlgt;