前端点击按钮时如何为指定Child2对象添加Child3结构？

核心思路是给每个 Child2 对应的按钮绑定其数据项，点击时直接修改该数据对象的结构即可。以下提供两种常见场景的实现方式：

Vue3 实现（主流框架场景） #

模板部分 #

<template>
  <div v-for="parent in items" :key="parent.title">
    <h3>{{ parent.title }}</h3>
    <div>
      <h4>{{ parent.content.title }}</h4>
      <div v-for="(child2, index) in parent.content.content" :key="index">
        <p>{{ child2.title }}</p>
        <button @click="addNewFea(child2)">添加 Child3</button>
        <!-- 可选：展示已添加的 Child3 内容 -->
        <div v-if="child2.content?.newFea">
          Child3: <input v-model="child2.content.newFea" />
        </div>
      </div>
    </div>
  </div>
</template>

脚本部分 #

<script setup>
import { ref } from 'vue'

// 初始化你的数据结构
const items = ref([
  {
    title: 'Parent',
    content: {
      title: 'Child1',
      content: [
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2' },
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2' }
      ]
    }
  }
])

// 按钮点击处理函数
const addNewFea = (child2Item) => {
  // 如果当前 Child2 没有 content 属性，先创建空对象
  if (!child2Item.content) {
    child2Item.content = {}
  }
  // 给 content 新增 newFea 属性，值为空字符串
  child2Item.content.newFea = ''
}
</script>

原生 JavaScript 实现（无框架场景） #

<div id="container">
  <div>
    <h3>Parent</h3>
    <div>
      <h4>Child1</h4>
      <div id="child2-wrap"></div>
    </div>
  </div>
</div>

<script>
// 初始化数据
let items = [
  {
    title: 'Parent',
    content: {
      title: 'Child1',
      content: [
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2' },
        { title: 'Child2', content: { newFea: 'Child3' } },
        { title: 'Child2' }
      ]
    }
  }
]

// 渲染 Child2 列表
function renderChild2List() {
  const wrap = document.getElementById('child2-wrap')
  wrap.innerHTML = ''
  
  items[0].content.content.forEach((child2, index) => {
    const item = document.createElement('div')
    item.innerHTML = `
      <p>${child2.title}</p>
      <button class="add-btn" data-index="${index}">添加 Child3</button>
      ${child2.content?.newFea ? `<div>Child3: <input value="${child2.content.newFea}" /></div>` : ''}
    `
    wrap.appendChild(item)
  })

  // 绑定点击事件
  document.querySelectorAll('.add-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const idx = parseInt(this.dataset.index)
      const targetChild2 = items[0].content.content[idx]
      
      if (!targetChild2.content) {
        targetChild2.content = {}
      }
      targetChild2.content.newFea = ''
      
      // 重新渲染更新视图
      renderChild2List()
    })
  })
}

// 首次渲染
renderChild2List()
</script>

核心逻辑说明 #

不管用框架还是原生实现，关键都是精准定位点击按钮对应的 Child2 数据对象，然后执行两步操作：

1. 如果该对象没有 content 属性，先创建一个空对象；
2. 给 content 添加 newFea: '' 属性。

框架会自动响应数据变化更新视图，原生 JS 则需要手动重新渲染对应区域。

内容的提问来源于stack exchange，提问作者Yellow rain coat