Vue Inertia 中基于条件从表单中移除值：实现动态和响应式表单

2024-03-11 23:46:38

Vue Inertia 中基于条件从表单中移除值

引言

在 Vue Inertia 应用中，构建动态表单时，根据特定条件从表单中移除值是常见需求。本文将深入探讨如何使用 Vue Inertia 实现基于条件的值移除。

使用 v-if 和 v-else-if 指令

首先，使用 v-if 和 v-else-if 指令控制表单字段的可见性，基于条件显示或隐藏它们。例如：

<template>
  <form @submit.prevent="submit">
    <div v-if="showCodeText">
      <!-- 代码文本字段 -->
    </div>
    <div v-else-if="showCodeSelect">
      <!-- 代码选择字段 -->
    </div>
    <!-- ... -->
  </form>
</template>

更新表单状态

当条件更改时，更新表单状态以反映字段的可见性。这可以通过使用 Vue Inertia 的 useForm hook 来实现。例如：

<script>
import { ref, watch } from "vue";
import { useForm } from "@inertiajs/inertia-vue3";

export default {
  setup() {
    const showCodeText = ref(true);
    const form = useForm({
      codeText: "",
      codeSelect: "",
    });
    
    watch(showCodeText, (newValue) => {
      if (newValue) {
        form.delete("codeSelect");
      } else {
        form.delete("codeText");
      }
    });
    
    return { showCodeText, form };
  },
};
</script>

watch 函数监听 showCodeText 的变化，并在它改变时相应更新 form 状态。

案例：条件验证

让我们考虑一个条件验证的案例。假设只有在选中复选框时才需要填写代码文本字段。我们可以使用上述技术实现此功能：

<template>
  <form @submit.prevent="submit">
    <div>
      <label for="requiredCheckbox">Required Checkbox:</label>
      <input type="checkbox" id="requiredCheckbox" v-model="isRequired">
    </div>
    <div v-if="isRequired">
      <!-- 代码文本字段 -->
    </div>
    <!-- ... -->
  </form>
</template>