How to use x-if and x-if “not” syntax in Alpine.js
I was recently working on a file where I wanted to use an if statement and an if not statement. This is the Alpine.js syntax that worked for me.
To note, Alpine.js docs state that “
x-if must be declared on a
<template> tag.” My code snippet below was used for a form on a website that uses Statamic as the CMS.
Its intent is that when the form is submitted successfully, only the success message is visible and the form fields are hidden. Also, on page entry, the form is visible and the success message is not visible.
<template x-if="success"> The content to show if the form had success </template> <template x-if="!success"> The content shows when the form loads. The template for errors is included in this area. This area is not shown when the success message (above) is shown.</template>
You can also use x-if conditionals, as shown on mywebtuts.com.