JSFiddle - React, Tailwind, and code Playground

by nekonenene

HTML

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>デモ</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
  </head>
  <body>
    <div class="container" id="app">
      <form class="mt-3">
        <div class="mb-3">
          <label for="exampleInputEmail1" class="form-label">メールアドレス</label>
          <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" v-model="email" required="required">
        </div>
        <div class="text-end">
          <button type="submit" class="btn btn-primary" @click="clickedButton" :disabled="!canSubmit" :class="canSubmit ? 'btn-primary' : 'btn-secondary'">送信！</button>      
        </div>
      </form>
    </div>
  </body>
</html>

CSS

body {
  margin: 20px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    email: '',
  },
  methods: {
		clickedButton(ev) {
      ev.preventDefault();
      confirm(`${this.email} を送信しました`);
    },
  },
  computed: {
    canSubmit() {
      return this.email !== '';
    },
  }
});