開始進入PrimeVue 元件撰寫，這次的目標是建立基本的表單元件。
Form 表單是應用程式中最常見的互動介面之一，特別是在用戶輸入資料的情況下，
例如註冊頁面、登入畫面或是資料提交等功能。
我們先看看元件使用~

The best preparation for tomorrow is doing your best today.
對明天做好的準備就是今天做到最好！

nuxt.config.ts設定
今日探索了 Form 元件的基本寫法，從 InputText 到 Switch Button ，
先引入相關元件。

export default defineNuxtConfig({
  primevue: {
    components: {
      prefix: "p-",
      include: [
        "InputText",
        "InputSwitch",
      ]
    },
  },
  plugins: [{ src: '~/plugins/primevue.js', ssr: false }],
});

InputText input欄位

1. 元件基本使用，通過 v-model 綁定資料，讓輸入框與應用程式的狀態同步。

<template>
    <div class="card flex justify-center">
        <InputText type="text" v-model="value" />
    </div>
</template>

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

const value = ref(null);
</script>
        

2.驗證
當使用者輸入資料時，加入驗證邏輯來檢查輸入是否符合要求。
-透過 v-show 來動態顯示錯誤訊息。
-使用 watch 監聽輸入框的值變化。

<template>
    <div class="card flex justify-center">
        <InputText type="text" v-model="input.value" />
        <div v-show="input.valid">Error Messafe</div>
    </div>
</template>

<script setup>
import { ref,watch } from 'vue';
interfase InputType{
    value: String,
    valid: Boolean
}

const input = ref<InputType>({
    value: '',
    valid: true
})

watch(
    ()=>nput.value.value,
    (newValue)=>{
        nput.value.value =newValue === ""
    }
)
</script>

有了基本 input 元件寫法，
官網還有其他 input 搭配寫法，請詳看官網。

SwitchButton 切換按鈕
接下來介紹的切換按鈕。通常用於在兩種狀態之間切換，例如開關通知、啟用或停用功能。
通過 v-model 綁定狀態，可以實現簡單的開關功能。

<template>
    <div class="card flex justify-content-center">
        <InputSwitch v-model="checked" />
    </div>
</template>

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

const checked = ref(false);
</script>

每個元件都能讓你的表單更加靈活且功能豐富。希望這些元件對你接下來的專案有所幫助！明天將進入選單系列，敬請期待！
繼續加油，明天見！