Vue.js中克隆template模板功能原生可用但项目中失效如何解决

问题原因 #

你遇到的问题核心是Vue单文件组件的模板编译逻辑和原生HTML的差异：

• 在普通HTML页面（比如你测试用的jsfiddle环境）中，<template>标签会被识别为原生模板元素，可通过content属性获取内部节点
• 但在Vue单文件组件内部，除了顶层的组件根<template>标签外，其余嵌套的<template>默认会被Vue模板编译器当作特殊语法节点（用于插槽、v-if/v-for分组等）处理，不会渲染为真实DOM中的原生<template>元素，所以你调用document.querySelector('#temp')实际返回的是null，后续操作自然不会生效，也不会抛出明显报错。

推荐解决方案（符合Vue开发规范） #

不要用原生DOM操作实现动态新增，改用Vue响应式数据驱动渲染的方式实现，改动如下：

1. 模板部分调整 #

删除内部的<template id="temp">，改用v-for基于数组动态渲染人员条目：

<template>
  <div class="content_modal noShadow modul">
    <div class="modal-header modul_header">
      <h3 class="modul_title">{{ title }}</h3>
    </div>

    <div class="body">     
      <!-- Person Data -->
      <testmodul1></testmodul1>
      <!-- Degree -->
      <testmodul2 title="2 Degree"></testmodul2>
    </div>

    <button @click="useIt">
      Use me
    </button>
    <div id="container">
      <!-- 基于数组动态渲染条目 -->
      <div v-for="(item, idx) in personList" :key="idx">
        <label>Firstname</label>
        <input type="text"/>
        <label>Lastname</label>
        <input type="text"/>
      </div>
    </div>
  </div>
</template>

2. 逻辑部分调整 #

在data中新增数组控制条目数量，点击方法改为给数组新增元素：

export default {
  data() {
    return {
      title: "Title",
      personList: [] // 用于存储人员条目计数
    };
  },
  components: {
    testmodul1,
    testmodul2
  },
  methods:{
    useIt(){
      this.personList.push({}) // 点击新增元素自动触发视图更新
    }
  }
}

兼容方案（非要使用原生template的临时处理） #

如果暂时不想改现有逻辑，可以给内部的<template>标签添加v-pre指令，告诉Vue不要解析该节点，直接渲染为原生DOM元素：

<template id="temp" v-pre>
  <div>
    <label>Firstname</label>
    <input type="text"/>
    <label>Lastname</label>
    <input type="text"/>
  </div>
</template>

注：该方案不推荐，动态生成的DOM脱离Vue管控，后续要加表单绑定、删除、校验等逻辑会非常麻烦。

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