-
|
I was exploring the ways to update an alpine list from outside the Here's a simple example, using the custom event <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine Quick Test</title>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<h1>Alpine Quick Test</h1>
<div x-data="getItems()" @specialevent.window="console.log('got event here!')">
<template x-for="(itm, index) in items" :key="itm">
<p x-text="itm" @click="removeItem(index)"></p>
</template>
<input type="text" x-model="currentNewItem">
<button @click="addItem">Add New Item</button>
<button onclick="sendEvent()">Send via event</button>
</div>
<script>
function getItems() {
return {
items: ['One', 'Two', 'Three', 'Four'],
addItem() {
this.items.push(this.currentNewItem)
},
addFromEvent(e) {
console.log("received event!")
console.log(e)
},
removeItem(index) {
console.log("Deleting " + index)
this.items.splice(index, 1)
},
currentNewItem: ""
}
}
function sendEvent() {
console.log("Sending event!")
let event = new CustomEvent('specialevent', {
detail: "fooEvent!",
bubbles: true
})
window.dispatchEvent(event)
}
window.addEventListener("specialevent", (e) => {
console.log("got event from window listener.")
})
</script>
</body>
</html>And this works fine. However, if we change the name of the event from <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alpine Quick Test</title>
<script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>
<h1>Alpine Quick Test</h1>
<div x-data="getItems()" @Specialevent.window="console.log('got event here!')">
<template x-for="(itm, index) in items" :key="itm">
<p x-text="itm" @click="removeItem(index)"></p>
</template>
<input type="text" x-model="currentNewItem">
<button @click="addItem">Add New Item</button>
<button onclick="sendEvent()">Send via event</button>
</div>
<script>
function getItems() {
return {
items: ['One', 'Two', 'Three', 'Four'],
addItem() {
this.items.push(this.currentNewItem)
},
addFromEvent(e) {
console.log("received event!")
console.log(e)
},
removeItem(index) {
console.log("Deleting " + index)
this.items.splice(index, 1)
},
currentNewItem: ""
}
}
function sendEvent() {
console.log("Sending event!")
let event = new CustomEvent('Specialevent', {
detail: "fooEvent!",
bubbles: true
})
window.dispatchEvent(event)
}
window.addEventListener("Specialevent", (e) => {
console.log("got event from window listener.")
})
</script>
</body>
</html>This was tested on Firefox 92.0.1 on Windows. |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
It's expected, browser attributes are always lowercase. You can write x-on:Foo but, if you inspect the page, your browser will convert it to x-on:foo |
Beta Was this translation helpful? Give feedback.
-
|
Ah, I didn't know that. Thank you for the clarification. Is that something that could be added to the docs (that event names need to be lower case when using x-on)? I could probably write a note and submit a PR if that would help? |
Beta Was this translation helpful? Give feedback.
It's expected, browser attributes are always lowercase. You can write x-on:Foo but, if you inspect the page, your browser will convert it to x-on:foo