การจัดการข้อมูลกับ Form Input ใน VueJS

<script setup>
import { reactive, ref } from 'vue'

const formData = reactive({
  name: '',
  email: '',
  message: ''
})
const submitted = ref(false)

function handleSubmit() {
  submitted.value = true
  console.log('Form Submitted:', formData)
  // ส่งข้อมูลไปยังเซิร์ฟเวอร์หรือประมวลผลตามต้องการ
}
</script>
<template>
   <form @submit.prevent="handleSubmit">
      <label for="name">Name:</label>
      <input type="text" id="name" v-model="formData.name">
      <br>
      <label for="email">Email:</label>
      <input type="email" id="email" v-model="formData.email">
      <br>
      <label for="message">Message:</label>
      <textarea id="message" v-model="formData.message"></textarea>
      <br>
      <button type="submit">Submit</button>
    </form>

    <div v-if="submitted">
      <h3>Form Data:</h3>
      <p>Name: {{ formData.name }}</p>
      <p>Email: {{ formData.email }}</p>
      <p>Message: {{ formData.message }}</p>
    </div>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>
<template>
   <input  :value="text" @input="event => text = event.target.value">
   <div>{{ text }}</div>
</template>

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>
<template>
   <input v-model="text">
   <div>{{ text }}</div>
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')
</script>
<template>
<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />
</template>

<script setup>
import { ref } from 'vue'

const message = ref('')

</script>
<template>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<textarea v-model="message"></textarea>
<!-- ใช้รูปแบบด้านล่างนี้ {{ }} ไมได้ ต้องใช้ v-model แทน -->
<!-- รูปแบบด้านล่าง สามารถใช้เพื่อนำข้อมูลไปแสดงเท่านั้น -->
<textarea >{{ message }}</textarea>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)
const checkedNames = ref([])

</script>
<template>
  <input type="checkbox" id="checkbox" v-model="checked" />
  <label for="checkbox">{{ checked }}</label>
  <hr>
  <div>Checked names: {{ checkedNames }}</div>

  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>

  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>

  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
</template>

<script setup>
import { ref } from 'vue'

const fruits = ref(['Apple', 'Banana', 'Cherry', 'Date', 'Grape'])
const selectedFruits = ref([])

</script>
<template>
  <h2>Select Your Favorite Fruits</h2>
    <div v-for="(fruit, index) in fruits" :key="index">
      <label :for="fruit">
        <input type="checkbox" :id="fruit" :value="fruit" v-model="selectedFruits" />
        {{ fruit }}
      </label>
    </div>

    <div v-if="selectedFruits.length">
      <h3>Selected Fruits:</h3>
      <ul>
        <li v-for="(fruit, index) in selectedFruits" :key="index">{{ fruit }}</li>
      </ul>
    </div>  
</template>

<script setup>
import { ref } from 'vue'

const picked = ref('')
</script>
<template>
 <div>Picked: {{ picked }}</div>

<input type="radio" id="one" value="One" v-model="picked" />
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked" />
<label for="two">Two</label>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref('')
const selected2 = ref([])
</script>
<template>
<div>Single Selected: {{ selected }}</div>
<select  v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<hr>
<div>Multiple Selected: {{ selected2 }}</div>
<select :style="{width:'100px'}" v-model="selected2" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
</template>

<script setup>
import { ref } from 'vue'

const toggle = ref('no')

</script>
<template>
  <div>
    <input
      type="checkbox"
      v-model="toggle"
      true-value="yes"
      false-value="no" />
    <p>Toggle value: {{ toggle }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const toggle = ref('no')
const dynamicTrueValue = ref('yes')
const dynamicFalseValue = ref('no')

</script>
<template>
  <div>
    <input
      type="checkbox"
      v-model="toggle"
      :true-value="dynamicTrueValue"
      :false-value="dynamicFalseValue" />
    <p>Toggle value: {{ toggle }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const checked = ref(false)
const checkedNames = ref([])
const first = ref('Option 1')
const second = ref('Option 2')
const pick = ref('') // Default value

</script>
<template>
  <div>
    <input type="radio" v-model="pick" :value="first" /> {{ first }}
    <input type="radio" v-model="pick" :value="second" /> {{ second }}
    <p>Selected value: {{ pick }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const selected = ref(null) // Default value

</script>
<template>
  <div>
    <select v-model="selected">
      <!-- ตัวอย่าง กำหนดค่าเป็น object -->
      <option :value="{ number: 123 }">123</option>
    </select>
    <p>Selected value: {{ selected }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const lazyMessage = ref('')
const age = ref(null)
const username = ref('') 

</script>
<template>
  <div>
    <label>Lazy:
      <input v-model.lazy="lazyMessage" placeholder="Type and then lose focus" />
    </label>
    <p>Lazy message: {{ lazyMessage }}</p>

    <label>Number:
      <input v-model.number="age" placeholder="Enter a number" />
    </label>
    <p>Age: {{ age }}</p>

    <label>Trim:
      <input v-model.trim="username" placeholder="Type your username" />
    </label>
    <p>Username: {{ username }}</p>
  </div>
</template>