x-ref is undefined for function call inside a x-for loop even though it's inside the x-data scope

[BramMortier]

I have some filtering logic where i use the setFilter function to adjust the filters and every time this function is called the renderResults function gets triggered. This function replaces the results content in the x-ref="results" div. This logic works as intended

import { templateRequest } from "../common/templateRequest";
import { buildQueryString } from "../common/buildQueryString";

export function productsFiltered() {
	return {
		loading: false,
		resultsCount: 0,
		mobileFiltersOpen: false,
		activeFilters: this.$persist([]),
		search: this.$persist(""),
		themes: this.$persist([]),
		types: this.$persist([]),
		priceOptions: this.$persist([]),
		levels: this.$persist([]),
		certificates: this.$persist([]),
		sort: this.$persist(""),

		async init() {
			const existingQueryParams = new URLSearchParams(window.location.search);

			if (existingQueryParams.get("types")) {
				this.types = existingQueryParams.get("types").split(",");
			}

			this.renderResults();
		},

		setFilter(key, value, label) {
			if (this[key].includes(value)) {
				this[key] = this[key].filter((item) => item !== value);
				this.activeFilters = this.activeFilters.filter((item) => item.value !== value);
			} else {
				this[key].push(value);
				this.activeFilters.push({ key, value, label });
			}

			this.renderResults();
		},

		async renderResults(url) {
			const queryString = this.getQueryString();
			let requestURL = `/requests/products/filteredList?${queryString}`;

			if (url) requestURL = url;
			const { html, content } = await templateRequest(requestURL);

			this.$refs.results.innerHTML = "";
			this.$refs.results.innerHTML = content;

			const resultsCountElement = html.querySelector("[data-total-results]");
			if (resultsCountElement) this.resultsCount = resultsCountElement.dataset.totalResults;
			if (!resultsCountElement) this.resultsCount = 0;

			this.updateURL();

			window.scrollTo({ top: 0, behavior: "smooth" });
		},

		getQueryString() {
			return buildQueryString([
				{ key: "search", value: this.search },
				{ key: "types", value: this.types.join(",") },
				{ key: "themes", value: this.themes.join(",") },
				{ key: "price-options", value: this.priceOptions.join(",") },
				{ key: "levels", value: this.levels.join(",") },
				{ key: "certificates", value: this.certificates.join(",") },
				{ key: "sort", value: this.sort },
			]);
		},

		updateURL() {
			const queryString = this.getQueryString();

			const baseURL = window.location.origin + window.location.pathname;
			const newURL = queryString ? `${baseURL}?${queryString}` : baseURL;

			window.history.replaceState(null, "", newURL);
		},
	};
}

{# ======================= #}
{# PROPERTIES              #}
{# ======================= #}
{% set class = class|default("") %}

{# ======================= #}
{# TEMPLATE                #}
{# ======================= #}
<section x-data="productsFiltered" class="b-products-filtered container {{ class }}">
    <div class="b-products-filtered-content">
        {% include "_components/products/filters" %}
        
        <div class="b-products-filtered-main">
            {% include "_components/products/sorting" %}

            {# We laden de resultaten in via een JS request. 
            Om de content te bewerken moet je _components/products/list aanpassen #}
            <div x-ref="results">
                {# Request content word hier geinjecteerd #}
            </div>
        </div>
    </div>
</section>

the x-data is defined outside the x-ref so the scope should be correct. The strange thing is when i call the setFilter function from within this loop inside the filters component. this.$refs.results is undefined and the renderResults function fails to replace the content.

so I tried console.log $refs.results after the setFilter call inside the template and not only does it log the correct element everything works now! When i remove the console log it stops working again. I have no clue why.

this is the difference between working and crashing

<li @click="setFilter(filter.key, filter.value); console.log($refs.results)" class="c-products-active-filters-item">
<li @click="setFilter(filter.key, filter.value)" class="c-products-active-filters-item">

{# ======================= #}
{# PROPERTIES              #}
{# ======================= #}
{% set class = class|default("") %}
{% set attributes = attributes|default({}) %}

{# ======================= #}
{# TEMPLATE                #}
{# ======================= #}
<ul x-show="activeFilters.length > 0" class="c-products-active-filters {{ class }}" {{ attr(attributes) }}>
    <template x-for="filter in activeFilters">
        <li @click="setFilter(filter.key, filter.value)" class="c-products-active-filters-item">
            <div class="c-products-filters-pill typo-body-sm">
                <span x-text="filter.label"></span>

                {% include "_components/common/icon" with { icon: "close" } only %}
            </div>
        </li> 
    </template> 
</ul>

[ekwoka]

x-for defines a new root, and I'm pretty sure refs only go on their directly contained component, not children.

you could directly assign that element to a value on the component to expose it