Vue.js中克隆元素并添加至DOM的正确实现方式

嘿，在Vue里可别想着直接克隆DOM元素哦！Vue的核心是数据驱动视图，咱们得遵循这个思路来实现动态添加输入框，这样才能保证数据和视图始终同步，避免各种奇怪的bug。

具体步骤如下： #

1. 用数组管理输入项数据
   首先在组件的data里定义一个数组，用来存储所有水果输入框的值，初始化可以放一个空元素对应默认的第一个输入框。

2. 用v-for动态渲染输入框
   把原来的静态输入框改成通过v-for循环渲染，这样数组里每多一个元素，Vue就会自动帮我们渲染一个对应的输入框。

3. 新增输入框只需更新数据
   点击“Add More”按钮时，只需要往数组里push一个空元素，Vue就会自动渲染出新的输入框，完全不用手动操作DOM！

完整代码示例 #

模板部分（HTML）

<div id="fruitForm">
  <div class="inputArea" v-for="(fruit, index) in fruits" :key="index">
    <label :for="`fruit${index}`">Enter Fruit Name</label>
    <input :id="`fruit${index}`" v-model="fruits[index]">
  </div>
</div>
<button @click="newInputField">Add More Fruit Input Fields</button>
<button @click="submit">Submit Fruit</button>

脚本部分（Vue组件）

export default {
  data() {
    return {
      fruits: [''] // 初始化一个空元素，对应第一个输入框
    }
  },
  methods: {
    newInputField() {
      this.fruits.push('') // 往数组里加空元素，Vue自动渲染新输入框
    },
    submit() {
      // 这里可以拿到所有输入的水果数据
      console.log('提交的水果列表:', this.fruits)
      // 后续可以做提交到后端等操作
    }
  }
}

为什么不直接克隆DOM？ #

如果手动用原生JS去克隆DOM元素并添加，Vue的虚拟DOM无法跟踪这些手动添加的元素，会导致数据和视图不同步——比如你在新输入框里输入内容，Vue的data里不会更新，提交的时候拿不到这些值；或者后续数据变化时，手动添加的元素不会被Vue正确更新。

遵循数据驱动的方式，Vue会帮我们处理所有视图渲染的细节，代码更简洁也更可靠~

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