Vue+FormKit多步骤表单：根据Practice选择动态更新Location选项

1. 修正变量名冲突 #

先调整Practice选择框内的v-for索引变量，避免和外层repeater的index重名：

<FormKit
   type="select"
   label="Practice"
   name="practice"
   :id="`provPractice_${index}`"
>
   <option value="" selected disabled>Select a practice...</option>
   <!-- 将内层index改为practiceIndex，避免变量冲突 -->
   <option v-for="(practice, practiceIndex) in formData.formSteps.practiceStep.practices" 
           :key="practiceIndex" 
           :value="practice.id">
     {{ practice.name }}
   </option>
</FormKit>

2. 定义响应式过滤计算属性 #

在组件的<script setup>中创建一个返回过滤函数的计算属性，用于根据选中的practiceId筛选对应地点：

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

// 假设formData是响应式ref对象
const getFilteredLocations = computed(() => {
  return (selectedPracticeId) => {
    return formData.value.formSteps.locationStep.locations.filter(
      location => location.practiceId === selectedPracticeId
    )
  }
})
</script>

3. 动态渲染Primary Location选项 #

修改Primary Location选择框，用计算属性生成匹配选项，同时修正错误的v-model绑定（FormKit会通过name自动绑定到对应数据字段）：

<FormKit
   type="select"
   label="Primary Location"
   name="primaryLocation"
   :id="`provPrimaryLocation_${index}`"
>
   <option value="" selected disabled>Select a location...</option>
   <option v-for="location in getFilteredLocations(formData.formSteps.providerStep.providers[index].practice)" 
           :key="location.id" 
           :value="location.id">
     {{ location.name }}
   </option>
</FormKit>

优化：用FormKit的options属性简化代码 #

如果想更贴合FormKit的用法，可使用options属性替代手动编写<option>标签，代码更简洁：

Practice选择框优化：

<FormKit
   type="select"
   label="Practice"
   name="practice"
   :id="`provPractice_${index}`"
   :options="[
     { label: 'Select a practice...', value: '', disabled: true },
     ...formData.formSteps.practiceStep.practices.map(prac => ({ 
       label: prac.name, 
       value: prac.id 
     }))
   ]"
/>

Primary Location选择框优化：

<FormKit
   type="select"
   label="Primary Location"
   name="primaryLocation"
   :id="`provPrimaryLocation_${index}`"
   :options="[
     { label: 'Select a location...', value: '', disabled: true },
     ...getFilteredLocations(formData.formSteps.providerStep.providers[index].practice).map(loc => ({ 
       label: loc.name, 
       value: loc.id 
     }))
   ]"
/>

关键说明 #

• 计算属性实现响应式过滤，选中的practice变化时，关联的location选项会自动更新
• 依赖FormKit自动数据绑定机制，通过name属性将选择框值绑定到formData.formSteps.providerStep.providers[index]对应字段
• 计算属性返回函数的方式，能为每个repeater项独立过滤对应地点列表

内容的提问来源于stack exchange，提问作者Nathan Skinner