CodePen Embed - Alpine Article 7

<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="app">
	<img :src="catPic" @click="flipImage">
</div>

document.addEventListener("alpine:init", () => {
	Alpine.data("app", () => ({
		catPic: "https://placecats.com/400/400",
		flipImage() {
			if (this.catPic.includes("/g")) this.catPic = this.catPic.replace("/g", "");
			else this.catPic = this.catPic.replace("/400", "/g/400");
		}
	}));
});

This Pen is owned by Raymond Camden on CodePen.

See more by @cfjedimaster on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.