List not rendered using AlpineJS

Using AlpineJS I have the following HTML:

  <div x-data="glossary()">
    <dl>
      <template x-for="term in data.terms">
        <dt x-text="term.name"></dt>
        <dd x-text="term.definition"></dd>
      <template>
    </dl>
  </div>

And glossary is the following:

export default function glossary() {

  return {

    data: {
      terms: null   
    },

    init() {

      this.data.terms = [
        { name: "a", definition: "da" },
        { name: "b", definition: "db" }
      ]

    }

  }

}

When I run the code the list is not populated.

What am I missing?

>Solution :

I think there is an issue in your HTML code and your JS code is fine.

<div x-data="glossary()">
  <dl>
    <template x-for="term in data.terms">
      <dt x-text="term.name"></dt>
      <dd x-text="term.definition"></dd>
    </template>
  </dl>
</div>

The issue is in your template tag closing tag. Instead of<template>, you should use </template>.