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

<template>
  <form @submit.prevent="sendComment()" class="flex flex-col">
    <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" />
    <input type="range" name="score" min="1" max="10" id="score">
    <button type="submit">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>