“转换组”内部的组件被渲染两次（重复）

Question

这是我面临的一个奇怪的问题。

Vue.component('testt', {
  template: '#myId',
  props: {
    myArray: {
      type: Array,
      default: function() {
        return ['James', 'Mike'];
      }
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <transition-group name="fadeLeft" tag="ul">
    <section key="0">
      <testt></testt>
      <template v-pre id="myId">
        <div>HELLO <a v-for="(val,index) in myArray">{{val}}</a></div>
      </template>
    </section>
  </transition-group>

</div>

https://jsfiddle.net/yrqt02kj/1/

transition-group两次渲染组件（第二次渲染在不解析“ {{variable}}”的情况下完成）。如果只删除transition-group父对象，则它会按预期工作，并且没有重复的内容。因此，绝对问题似乎在那里。如何解决此问题（因此，保留transition-group并解决问题）

---

请不要发布答案“在应用程序外使用组件”或类似的问题，我描述了我需要找到答案的问题。

Answer 1

有两个问题：

1. 在section大头钉中，您具有用已解析的HTML呈现的testt标记，以及具有另一个文字标记（不呈现）的template标记。并且由于transition-group元素必须为key，因此必须将模板移出。

2. template，我做了一点改动以渲染li标签，因为您要渲染ul，但是如果您仅在模板中渲染li，则会收到一条错误消息，指出模板can only have root element。

这里是解决方法：

<script src="https://unpkg.com/vue"></script>

<div id="app">
    <transition-group name="fadeLeft"  tag="div">
       <section  key="0">
         <testt></testt>
       </section>
    </transition-group>         
    <template v-pre id="myId">
      <ul>
        <li v-for="(val, index) in myArray">HELLO <a >{{val}}</a></li>
      </ul>
    </template>
</div>

<script>
Vue.component('testt', {
  template: '#myId',
  props: {
    myArray : { type:Array, default :function(){ return ['James','Mike'];} }
  }
})

new Vue({
  el: '#app'
})
</script>