动态表单动态渲染问题？

Question

在Vue2环境中，有一个动态表单，数据源如下：

list: [
  { name: '姓名', props: 'name', show: [] },
  { name: '年龄', props: 'age', show: [] },
  { name: '身高', props: 'height', show: [] },
  {
    name: '是否合格',
    props: 'isPass',
    show: [
      { key: 'age', symbol: '<=', value: 28 },
      { key: 'height', symbol: '>=', value: 180 },
    ],
    value: ''
  }
],
formData: { name: '', age: '', height: '', isPass: '' },

要实现的功能是：每个表单项根据其对象里的show来判断是否显示，如果show为空数组，代表无条件限制。
比如是否合格这一项，只有在 年龄<=28&&身高>=180 时才显示。

测试渲染代码如下：

<div class="list">
  <template v-for="item in list">
    <div class="item" :key="item.name">
      <span>{{ item.name }}</span>
      <input type="text" v-model="formData[item.props]" :placeholder="'请输入' + item.name" />
    </div>
  </template>
</div>

请问下一步该如何进行？

Answer 1

<template>
  <div class="list">
    <template v-for="item in list">
      <div class="item" v-if="shouldShow(item)" :key="item.name">
        <span>{{ item.name }}</span>
        <input type="text" v-model="formData[item.props]" :placeholder="'请输入' + item.name" />
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { name: '姓名', props: 'name', show: [] },
        { name: '年龄', props: 'age', show: [] },
        { name: '身高', props: 'height', show: [] },
        {
          name: '是否合格',
          props: 'isPass',
          show: [
            { key: 'age', symbol: '<=', value: 28 },
            { key: 'height', symbol: '>=', value: 180 },
          ],
          value: ''
        }
      ],
      formData: { name: '', age: '', height: '', isPass: '' },
    };
  },
  methods: {
    shouldShow(item) {
      if (item.show.length === 0) {
        return true;
      }
      return item.show.every(condition => {
        const formValue = this.formData[condition.key];
        switch (condition.symbol) {
          case '<=':
            return formValue <= condition.value;
          case '>=':
            return formValue >= condition.value;
          default:
            return false;
        }
      });
    }
  }
};
</script>

<style scoped>

</style>