这是我面临的一个奇怪的问题。
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
并解决问题)
请不要发布答案“在应用程序外使用组件”或类似的问题,我描述了我需要找到答案的问题。
有两个问题:
在section
大头钉中,您具有用已解析的HTML呈现的testt
标记,以及具有另一个文字标记(不呈现)的template
标记。并且由于transition-group
元素必须为key
,因此必须将模板移出。
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>