Vue/Vuetify中隐藏动态生成列表的某一项，仅当其他输入有值时才显示的实现方法

需求说明 #

• API动态渲染的表单默认展示全部输入项，仅隐藏1个指定输入项
• 仅当用户在另一个关联的指定输入项中填入内容后，才展示之前隐藏的输入项

实现思路 #

基于Vue框架实现，通过条件渲染指令控制目标输入项的显隐，用计算属性绑定表单数据实现响应式更新。

代码示例 #

<Form>
  <div v-for="formItem in state.formItemData">
    <!-- 仅当关联输入项one有值时，才展示目标输入项two -->
    <template v-if="formItem.one !== ''">
      <form-input
        v-model="invoiceForm.two"
        :key="formItem.id"
        ref="two"
      ></form-input>
    </template>
  </div>
</Form>

<script setup>
// 计算属性绑定表单数据，实现双向响应式更新
const invoiceForm = computed({
  get: () => state.forms.formData,
  set: (value) => {
    state.forms.formData = value
  }
})
</script>

注意事项 #

• 替换代码中的one为你需要监听的关联输入项字段名，two为需要动态显隐的目标输入项字段名
• 若需要兼容输入项值为null/undefined的场景，可将判断条件修改为!!formItem.one

内容的提问来源于stack exchange，提问作者Denis J