مدیریت فرم‌ها در Vue.js

<template>
  <div>
    <input type="text" v-model="name" placeholder="نام خود را وارد کنید" />
    <p>نام شما: {{ name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  }
};
</script>

<template>
  <div>
    <label>نام:</label>
    <input v-model="formData.name" type="text" />

    <label>ایمیل:</label>
    <input v-model="formData.email" type="email" />

    <label>جنسیت:</label>
    <input v-model="formData.gender" type="radio" value="مرد" /> مرد
    <input v-model="formData.gender" type="radio" value="زن" /> زن

    <label>علاقه‌مندی‌ها:</label>
    <input v-model="formData.hobbies" type="checkbox" value="ورزش" /> ورزش
    <input v-model="formData.hobbies" type="checkbox" value="موسیقی" /> موسیقی

    <label>کشور:</label>
    <select v-model="formData.country">
      <option value="ایران">ایران</option>
      <option value="آلمان">آلمان</option>
      <option value="آمریکا">آمریکا</option>
    </select>

    <button @click="submitForm">ارسال</button>

    <pre>{{ formData }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: "",
        email: "",
        gender: "",
        hobbies: [],
        country: ""
      }
    };
  },
  methods: {
    submitForm() {
      console.log("اطلاعات فرم:", this.formData);
      alert("فرم ارسال شد!");
    }
  }
};
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="name" type="text" placeholder="نام" />
    <button type="submit">ارسال</button>
  </form>
</template>

<script>
export default {
  data() {
    return { name: "" };
  },
  methods: {
    submitForm() {
      alert(`نام ارسال شد: ${this.name}`);
    }
  }
};
</script>

<template>
  <div>
    <input v-model="email" type="email" placeholder="ایمیل" />
    <p v-if="emailError" style="color: red">{{ emailError }}</p>

    <button @click="validateForm">ارسال</button>
  </div>
</template>

<script>
export default {
  data() {
    return { email: "", emailError: "" };
  },
  methods: {
    validateForm() {
      if (!this.email.includes("@")) {
        this.emailError = "ایمیل معتبر نیست!";
      } else {
        this.emailError = "";
        alert("فرم با موفقیت ارسال شد!");
      }
    }
  }
};
</script>

<template>
  <div>
    <button @click="addField">افزودن فیلد</button>
    <div v-for="(item, index) in fields" :key="index">
      <input v-model="item.value" placeholder="مقدار وارد کنید" />
      <button @click="removeField(index)">❌</button>
    </div>
    <button @click="submitForm">ارسال</button>
    <pre>{{ fields }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return { fields: [{ value: "" }] };
  },
  methods: {
    addField() {
      this.fields.push({ value: "" });
    },
    removeField(index) {
      this.fields.splice(index, 1);
    },
    submitForm() {
      console.log("داده‌های فرم:", this.fields);
    }
  }
};
</script>