动态表单动态渲染问题？

<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>