How to access data and getters from an Alpine component with getElementById()?

[ralphjsmit]

Hey Alpine team, thanks for making and maintaining this great tool!

Today I've a question about using a document.getElementById() or a dynamicx-ref and I'm really hoping you could help me with that.

In short, I'm trying to create a map of a barge / ship. On this map, users should be able to select a location for machines on the ship themselves. See the image below. The dark gray parts are the locations of existing machines, the blue rectangle the current selection and the red squares the parts where the selection overlaps existing machines. Must say that I'm quite proud of it already as someone who doesn't have much feeling with JS.

Nevertheless, there's still something I cannot get fixed. That has to do with the red squares, where the selection overlaps already existing machines. As you probably might imagine, any selection that overlaps existing machines is not valid.

I'd like to disable making a selection if part of the selected area is disabled.

@click="
if (state === '' || state === 'selected') {

 /* Start a new selection process */
  proposed_grid_row_start = index;
  proposed_grid_row_end = index;
  proposed_grid_column_start = i;
  proposed_grid_column_end = i;
  state = 'selecting';
} else if (state === 'selecting') {

   /* Save the current selection */
    canSubmit = true;
    let forLoopIndex = 0;
    for (let row of rows) {
    console.log(row)
    console.log(forLoopIndex)

        for (let i = 1; i <row; i++) {

                var el = document.getElementById('' + index + i);
                console.log(el); /* This returns the correct element */
                /* Check whether there are squares that are in the selection range AND are disabled.

                I'd expect to be able to do something like this:
                el.inSelectionRange && el.disabled

                But this gives me error 'cannot call inSelectionRange/disabled on undefined
                if (el.inSelectionRange && el.disabled) { canSubmit = false; }
                */
        }
        forLoopIndex += 1;
    }

/* If canSubmit is still true, finish the selection. If false, keep it in the 'selecting' state. (Perhaps show an error message later.) */
 if (canSubmit) {
  proposed_grid_row_end = index;
  proposed_grid_column_end = i;
  state = 'selected';
}
}
"

I can reference each individual element with this:

:id="index + '' + i" :x-ref="index + '' + i"

The problem is that var el = document.getElementById('' + index + i); returns the correct element, but that I can't do el.inSelectionRange or el.disabled in order to access the Alpine x-data.

How should I change this code, so that I can reference/use the Alpine data?

Here is the Codepen with the example

The inserted data from PHP looks like this (I hardcoded it for the codepen):

    $data = [
        'rows' => [20, 21, 22, 23, 22, 21, 20,],
        'machines' => [
            [
                'grid_row_start' => 1,
                'grid_row_end' => 3,
                'grid_column_start' => 1,
                'grid_column_end' => 2,
                'name' => 'Machine A',
                'brand' => /* MachineBrand::firstWhere('brand', 'John Deere') */null,
            ], [
                'grid_row_start' => 5,
                'grid_row_end' => 5,
                'grid_column_start' => 3,
                'grid_column_end' => 3,
                'name' => 'Machine B',
                'brand' => /*MachineBrand::firstWhere('brand','MAN')*/ null,
            ], [
                'grid_row_start' => 2,
                'grid_row_end' => 4,
         ...

I'd would really appreciate it if you could take a look and explain me how to retrieve the correct DOM element and how I can use the data from Alpine.

Thanks!