Vue中如何根据JSON匹配条目行数触发click事件添加对应元素

该需求完全可实现，核心逻辑为监听父组件传入的item prop变化，匹配本地JSON的对应配置后批量添加元素即可，具体操作如下：

实现步骤 #

• 首先处理JSON匹配逻辑：你的本地JSON是数组结构，每个元素为仅含单个key的对象，需要先匹配到key和传入item相等的配置项
• 其次添加prop监听：当item值更新时，获取对应配置下的子元素数量，批量调用添加元素的方法
• 可选调整：可根据业务需求决定切换选项时是否清空已添加的元素

完整修改代码 #

child.vue 模板部分（补充输入项渲染逻辑） #

<template>
  <div class="mt-2">
    <!-- 已添加元素渲染，可根据业务需求替换为实际组件 -->
    <div v-for="(ele, idx) in inputs" :key="idx" class="mb-2">
      元素{{idx + 1}}
    </div>
    <b-button @click="addElement" variant="block">Add element</b-button>
  </div>
</template>

child.vue 脚本部分 #

<script>
import json from './json/json.json'
export default {
  props: ["item"],
  data() {
    return {
      inputs: [{}],
      json: json,
    }
  },
  watch: {
    item: {
      // 组件初始化时如果已传入item也触发逻辑，不需要可删除
      immediate: true,
      handler(newItem) {
        if (!newItem) return
        // 匹配JSON中对应item的配置
        const targetItem = this.json.find(config => Object.keys(config)[0] === newItem)
        if (!targetItem) return
        const targetConfig = targetItem[newItem]
        // 获取对应配置的行数
        const rowNum = Object.keys(targetConfig).length
        // 可选：切换选项时清空原有元素，不需要可删除
        this.inputs = []
        // 批量添加对应数量的元素
        for(let i=0; i<rowNum; i++) {
          this.addElement()
        }
      }
    }
  },
  methods: {
    addElement() {
      this.inputs.push({});
    },
  }
}
</script>

注意事项 #

• 若不需要组件初始化时就执行匹配逻辑，删除watch配置中的immediate: true即可
• 若需要保留之前手动添加的元素，删除this.inputs = []这行代码即可
• 如果后续调整JSON结构，对应修改匹配配置的逻辑即可

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