Uncaught (in promise) ReferenceError: handler is not defined

[ajtrichards]

Hi All.

I'm new to using Alpine JS so apologies if I've missed something really basic!

Alpine JS Version
I'm using version 3.2.2 from CDN JS

Problem
I have the following HTML code:

<div x-data="handler">
  <template x-for="field in fields">
    <div class="form-group">
      Col 1
    </div>
    <div class="form-group">
      Col 2
    </div>
    <div class="form-group">
      Col 3
    </div>
    <div class="form-group">
      Col 4
    </div>
    <div class="form-group">
      Col 5
    </div>
    <div class="form-group">
      Col 6
    </div>
    <div>
      Col 7
    </div>
  </template>

  <a href="#" @click="addNewField()">Add new colour</a>
</div>
</div>

This is the JavaScript I'm using:

document.addEventListener("alpine:init", () => {
  Alpine.data("handler", () => ({
    fields: [],
    addNewField() {
        this.fields.push({});
    },
  }));
});

When I run this in the browser I keep getting a message Uncaught (in promise) ReferenceError: handler is not defined. I think get further messages to say fields isn't defined.

I've added this in Codepen to see if I can get it running but I get the same messages in the console.

https://codepen.io/ajtrichards/pen/LYymVNq

Any help would be appreciated :)

Thanks,
Alex

[danddanddand]

You need to have a single element as direct child to template.

[ajtrichards]

Thanks @danddanddand - I've updated the template so it now show's as:

<template x-for="(field, index) in fields" :key="index">
    <div class="grid grid-cols-7 gap-4>
      <div class="form-group">
        Col 1
      </div>
      .....
      <div class="form-group">
        Col 7
      </div>
    </div>
  </template>

[KevinBatdorf]

The script also needs to be deferred so that the listener is registered before the Alpine script runs.

If you move the listener above your code it will work too.

[ajtrichards]

Thanks for this suggestion @KevinBatdorf. I added <script defer> and that still produced the same errors. I also moved the <script> block to my layout that all the other blade templates extend and still the same :(