Question

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

<script src="https://unpkg.com/vue@2.6.11/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>My neighbors: <a v-for="(val,index) in myArray">{{val}}</a></div>
      </template>
    </section>
  </transition-group>

</div>

<script>

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

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

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

请不要发布答案“在应用程序外部使用组件”或类似的问题，我描述了我需要找到答案的问题。同样，先行的是template必须在transition-group后代之内。

Answer 1

问题：

在section大头钉中，您有一个testt标签，它是用已解析的HTML呈现的，还有template，它是作为另一个文字标签呈现的（不呈现）。而且由于必须transition-group个元素key，因此必须将模板移出。

解决方案：

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

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

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

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

“ transition-group”内部的组件呈现两次（重复）

1 个答案: