复制包含v-for的元素，但是复制出来的元素不会带有v-for的元素

Question

html部分

 <div id="app">
    <div id="ul" class="box">
      <ul>
        <li v-for="item in items">{{item.message}}</li>
      </ul>
    </div>
  </div>

js部分

 var test = new Vue({
      el: "#app",
      data: {
        items: [{
            message: "foo"
          },
          {
            message: "fo1"
          },
          {
            message: "fo2"
          },
          {
            message: "fo3"
          },
        ]
      }
    })
    
     var clone = document.getElementById('ul').cloneNode();
     document.getElementsByTagName('body')[0].appendChild(clone)

复制出来的元素不带有v-for的效果，我希望复制出来的元素同样能绑定items显示

Answer 1

实际你这种属于复用组件的问题，推荐用VUE组件

Answer 2

直接在items中push啊

Answer 3

你可能不应该混用 Vue 和 DOM API。
如果你需要复制，应该在 Vue 里面预留相应的接口：

HTML:

<div id="app">
    <div id="ul" class="box">
      <ul>
        <li v-for="item in items">{{item.message}}</li>
      </ul>
    </div>
      <ul v-if="cloned">
        <li v-for="item in items">{{item.message}}</li>
      </ul>
  </div>

JS:

 var test = new Vue({
      el: "#app",
      data: {
        cloned: false,
        items: [{
            message: "foo"
          },
          {
            message: "fo1"
          },
          {
            message: "fo2"
          },
          {
            message: "fo3"
          },
        ]
      }});

test.cloned = true;

Answer 4

如果你只是想复制带html的DOM元素,那么带个参数true就可以了

var clone = document.getElementById('ul').cloneNode(true);

如果还要vue的状态同步，那么需要另外实例化一个vue对象，并且还要把element元素替换为clone出来的那个

var clone = document.getElementById('ul').cloneNode(true);
var vmClone = new Vue(Object.assign(vm.$options, { el: clone }));