Vue.js中如何用v-for根据用户选择动态渲染组件数组？

1. 先修复计算属性的语法错误 #

原计算属性缺少必要的逗号，会引发JS语法错误，先修正：

computed: {
    order(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "credit card" , component:"CreditCard"},
      ]
    },
    feedback(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "feedback text" , component:"FeedbackText"},
      ]
    },
    preOrder(){
      return [
        {name : "email" , component:"Email"},
        {name : "order details" , component:"OrderDetails"},
      ]
    }
},

2. 父组件新增选中状态管理 #

父组件需要记录用户点击的具体popup类型，再传递给弹窗组件：

<!-- 父组件模板 -->
<template>
  <!-- 产品选择列表 -->
  <div v-for="product in items" :key="product.id">
    <h3>{{ product.name }}</h3>
    <div v-for="child in product.children" :key="child.id">
      <button @click="openPopup(child.popup)">{{ child.name }}</button>
    </div>
  </div>

  <!-- 弹窗组件 -->
  <popUps
    v-if="show"
    :show="show"
    :selectedPopup="selectedPopup"
    @close="show = false"
  ></popUps>
</template>

<script>
export default {
  data() {
    return {
      items: [/* 你的产品数组数据 */],
      show: false,
      selectedPopup: ''
    }
  },
  methods: {
    openPopup(popupType) {
      this.selectedPopup = popupType;
      this.show = true;
    }
  }
}
</script>

3. 弹窗组件动态匹配表单组件 #

弹窗组件接收选中的popup类型，新增计算属性动态获取对应表单配置：

<!-- 弹窗组件模板 -->
<template>
  <div v-if="show">
    <ul>
      <li v-for="item in currentFormComponents" :key="item.name">
        <span class="item-title">{{ item.name }}</span>
        <component :is="item.component" />
      </li>
    </ul>
    <button @click="$emit('close')">关闭</button>
  </div>
</template>

<script>
export default {
  props: ["show", "selectedPopup"],
  computed: {
    // 保留原有三个计算属性
    order(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "credit card" , component:"CreditCard"},
      ]
    },
    feedback(){
      return [
        {name : "personal info" , component:"PersonalInfo"},
        {name : "feedback text" , component:"FeedbackText"},
      ]
    },
    preOrder(){
      return [
        {name : "email" , component:"Email"},
        {name : "order details" , component:"OrderDetails"},
      ]
    },
    // 新增动态匹配计算属性
    currentFormComponents() {
      // 避免无效值报错
      if (this.selectedPopup && typeof this[this.selectedPopup] === 'function') {
        return this[this.selectedPopup]();
      }
      return [];
    }
  }
}
</script>

核心逻辑说明 #

• 父组件负责收集用户的选择，把具体的popup类型传递给弹窗，避免弹窗直接遍历整个items数组导致的取值错误
• 弹窗通过currentFormComponents计算属性，利用this[selectedPopup]()的方式动态调用对应的计算属性，实现表单组件的按需渲染
• 增加空值判断，防止因选中状态无效引发报错

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