Javascript Vue.js-带有转换组的空结果消息（“必须键入子项”）

我使用vue.js创建了一个小数据过滤工具，并使用转换使它看起来很漂亮。但是，如果当前筛选器设置没有结果，我还想显示一条消息，因此我尝试了以下操作：

<transition-group …>

  <div class="SOME_CLASSES" v-for="x in RESULTS" :key="x.id">…</div>

  <div class="OTHER_CLASSES" v-if="!RESULTS">Sorry, no results.</div>

</transition-group>

…
对不起，没有结果。

…但这不起作用，我得到一个警告：

[Vue warn]：必须键入子项：

现在我可以将消息移到

之外：

…
对不起，没有结果。

…但是，当显示此消息时，我将失去奇妙的动画效果

是否有一些非黑客的解决方案来显示带有转换的“空结果”消息？
（黑客的解决方案是在

结果
数据中创建一个虚拟条目，然后到处检查它。）
用于列表；您需要一个

保留
中的
名称
属性，以便动画相同。
用于列表；您需要一个

保留
中的
name
属性，以便动画相同。
您应该包装包含Sorry，no results的元素。通过与转换组同名的转换，如下所示：


Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:'列表演示'，
数据：{
项目：[1,2,3,4,5,6,7,8,9]，
下次：10
},
方法：{
随机索引：函数（）{
返回Math.floor（Math.random（）*this.items.length）
},
添加：函数（）{
this.items.splice（this.randomIndex（），0，this.nextNum++）
},
删除：函数（）{
this.items.splice（this.randomIndex（），1）
},
}
})
。列表项{
显示：内联块；
右边距：10px；
}
.列表进入活动状态，
.列出活动状态{
过渡：所有1；
}
.输入列表，
.列名留任
/*.列表在版本2.1.8下保持活动状态*/
{
不透明度：0；
变换：translateY（30px）；
}

添加
去除
{{item}}
对不起，没有结果。
您应该包装包含抱歉，没有结果的元素。通过与转换组同名的转换，如下所示：


Vue.config.devtools=false；
Vue.config.productionTip=false；
新Vue({
el:'列表演示'，
数据：{
项目：[1,2,3,4,5,6,7,8,9]，
下次：10
},
方法：{
随机索引：函数（）{
返回Math.floor（Math.random（）*this.items.length）
},
添加：函数（）{
this.items.splice（this.randomIndex（），0，this.nextNum++）
},
删除：函数（）{
this.items.splice（this.randomIndex（），1）
},
}
})
。列表项{
显示：内联块；
右边距：10px；
}
.列表进入活动状态，
.列出活动状态{
过渡：所有1；
}
.输入列表，
.列名留任
/*.列表在版本2.1.8下保持活动状态*/
{
不透明度：0；
变换：translateY（30px）；
}

添加
去除
{{item}}
对不起，没有结果。
我认为您应该包装包含抱歉，没有结果的元素。通过一个与transition groups同名的transition，我认为应该包装包含抱歉，没有结果的元素。通过与转换组同名的转换
<transition-group …>

  <div class="SOME_CLASSES" v-for="x in RESULTS" :key="x.id">…</div>

</transition-group>

<div class="OTHER_CLASSES" v-if="!RESULTS">Sorry, no results.</div>