如何实现点击后将已有HTML结构复制并新增到页面上

html：

//绑定点击事件
<div class="wlAddBtn " @click="add()">
     新增
</div>
//要复制的HTML结构
 <div class="model" v-for="(val,index) in htmlArr" :key="index">
          <p class="modelTitle">选项{{ index }}</p>
          <div class="nameDiv">
            <div>昵称：</div>
            <input type="text" v-model="val.name" placeholder="请输入昵称" />
          </div>
          <div class="desc">
            <div>文字描述：</div>
            <textarea name="" id="" cols="30" rows="10" v-model="val.desc"></textarea>
          </div>
 </div>

data中定义一个数组，数组长度来控制页面上该结构循环显示的次数：

 data: function() {
          return {
             htmlArr: [
              {
                name: "",
                desc: "",
              }
            ]
    }

}

在methods中定义点击事件，来改变数组长度

add() {
            this.htmlArr.unshift({
              name: "",
              desc: "",
            });
            console.log(this.htmlArr);
 },