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>
      {{ score }}%
      <input type="range" name="score" min="0" max="100" step="1" id="score" class="w-full" v-model="score">
    </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 username = ref('')
const message = ref('')
const score = ref(50)

const resetForm = () => {
  username.value = ''
  message.value = ''
  score.value = 5
}

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

<style lang="scss" scoped>
form {

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