design-patterns-nuxt/components/comment/form.vue

<template>
  <form @submit.prevent="sendComment()" class="flex flex-col bg-slate-200 my-12 p-4 w-full rounded-md">
    <input v-model="username" type="text" placeholder="username" min="3" max="50" required id="username">
    <textarea v-model="message" type="textarea" placeholder="message" min="3" max="500" required id="message" />
    <div class="scoreContainer">
      <label for="score">
        Note:
      </label>
      <input type="range" name="score" min="1" max="10" id="score" class="w-full">
    </div>
    <button type="submit"
      class="bg-white rounded-md p-2 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">envoyer</button>
  </form>
</template>

<script setup lang="ts">
const store = useCommentStore()
const props = defineProps(['filmId'])

const sendComment = () => {
  store.add({
    username: username.value,
    message: message.value,
    score: document.getElementById('score').value,
    filmId: props.filmId,
    added: Date.now(),
  })
}
</script>

<style lang="scss" scoped>
form {

  input,
  textarea,
  .scoreContainer {
    @apply p-4 m-2;
  }
}
</style>