v1.9.2

Fixed

• x-on:keydown.enter.prevent was "preventDefault"ing for every key pressed, not just for the enter key. Fixed now.

v1.9.1

Fixed

• x-on: listeners inside loop were not lazily evaluating the value of an iteration alias inside a loop. Fixed now.

v1.9.0

Added

• x-for directive with :key binding on <template> tag. This uses a similar strategy as x-if (appending real dom nodes after the template tag, and re-evaluating them when data updates)

<template x-for="item in items" :key="item">
    <div x-text="item"></div>
</template>

Fixed

• Non-root x-data elements are now being initialized by the root mutation observer.

v1.8.2

Added

• System modifier key-combos:
  <input type="text" x-data @keydown.cmd.k="doSomething">
  (only fires when both cmd AND k are pressed)

v1.8.1

Fixed

• x-if without transitions applied was behaving badly. (#82)

v1.8.0

Fixed:

• Allow colons in event names: x-on:custom:event="..." (#65)
• Support for "space" keydown modifier: x-on:keydown.space="..." (#69)
• Class attribute bindings (for string and array syntax) weren't merging. Now, Alpine matches the behavior of VueJS (#75)
• Some reactivity issues have been fixed by a pretty major refactor of the core dependancy tracking mechanism (#74)

v1.7.0

Added

• The ability to return a callback from x-init and it will run AFTER Alpine makes it's initial DOM updates (similar to the mounted() hook in VueJS, or the current, but now deprecated, x-mounted hook)

<div x-data="initialData()" x-init="init()">
    <span x-text="foo" x-ref="span">bar</span>
</div>
<script>
function initialData() {
    return {
        foo: 'baz',
        init() {
            this.$refs.span.innerText // 'bar'

            return () => {
                this.$refs.span.innerText // 'baz'
            }
        }
    }
}
</script>

Deprecated

• x-created and x-mounted are now deprecated and will be removed in 2.0

v1.6.2

Re-introduce x-init (sorry for the breaking change) - will remove in the next major release

v1.6.1

FIxed

• this.$el now returns raw DOM node instead of Proxy

v1.6.0

Upgrade Guide

• Convert all instances of x-init to x-created:

<div x-data="{ foo: 'bar' }" x-init="foo.bar = 'baz">
<!-- To: -->
<div x-data="{ foo: 'bar' }" x-created="foo.bar = 'baz">

Added

• x-created lifecycle hook (runs on initialization, but BEFORE dom elements initialized)
• x-mounted lifecycle hook (runs on initialization, and AFTER dom elements are initialized)
• $el magic accessor (access the root dom node of the component)

Fixed

• Data reactivity from inside extracted components and callbacks
• Made setting a value for x-data optional

Removed

• The x-init directive