Vue.js 如何实施<；过渡组>；在v-for循环中？

对此有一个建议的答案，但这个解决方案对我不起作用。我有一个嵌套的

v-for

，希望在最里面的li元素被computed语句删除或添加时设置它们的动画。我当前的代码如下所示：

{{index.toUpperCase（）}

外部的过渡组工作得很好，但是当我设置内部的过渡组时，我得到了

ReferenceError:未定义字母

我尝试按照建议添加

：letter=“letter”

，但它仍然不适合我。有什么建议吗？如果有更好的方法，我很乐意重新格式化代码

编辑：为了回应这里的一些评论，首先，我将Vue注入到基于PHP的Wordpress模板中，所以我无法创建单独的组件。我不知道这是否是导致问题的部分原因，或者为什么有些人可以在运行代码时不出错

下面是一个JSON示例，它正在迭代：

{
   a: [
       {
        first_name: 'John',
        last_name: 'Apple',
        suffix: 'DDS',
        permalink: 'www.test.com',
        thumbnail: '<img src="test.com" />',
        specialty: 'Some specialty'
       }, 
       {
        first_name: 'Jane',
        last_name: 'Apple',
        suffix: 'DDS',
        permalink: 'www.test.com',
        thumbnail: '<img src="test.com" />',
        specialty: 'Some specialty'
       }
      ],
    d: [
       {
        first_name: 'John',
        last_name: 'Doe',
        suffix: 'DDS',
        permalink: 'www.test.com',
        thumbnail: '<img src="test.com" />',
        specialty: 'Some specialty'
       }, 
       {
        first_name: 'Jane',
        last_name: 'Doe',
        suffix: 'DDS',
        permalink: 'www.test.com',
        thumbnail: '<img src="test.com" />',
        specialty: 'Some specialty'
       }
      ]
}

{
a:[
{
名字：“约翰”，
姓氏：“苹果”，
后缀：“DDS”，
permalink:“www.test.com”，
缩略图：“”，
特产：“一些特产”
}, 
{
名字：“简”，
姓氏：“苹果”，
后缀：“DDS”，
permalink:“www.test.com”，
缩略图：“”，
特产：“一些特产”
}
],
d:[
{
名字：“约翰”，
姓：“Doe”，
后缀：“DDS”，
permalink:“www.test.com”，
缩略图：“”，
特产：“一些特产”
}, 
{
名字：“简”，
姓：“Doe”，
后缀：“DDS”，
permalink:“www.test.com”，
缩略图：“”，
特产：“一些特产”
}
]
}

不知道是什么导致了错误，但尝试创建一个新组件，该组件接受

字母作为道具，并包含您的内部
。然后将此新组件嵌入根
v-for

它应该给出这样的信息：



{{index.toUpperCase（）}


其中一个原因是浏览器在Vue访问DOM之前解析DOM。浏览器不知道什么是
，所以这会被忽略。相反，它会在另一个
中看到一个
。由于
元素通常不能嵌套，因此浏览器将
提升到定义
字母的父元素
之外

将揭示问题：


Vue处理该模板时，会遇到
字母
，从技术上讲，该字母未在
v-for
之外声明，从而导致您看到的错误

解决方案1:
包装器
如果需要在DOM模板中使用，请使用
将内部
包裹起来，以便浏览器忽略它：



你能提供更多的代码吗？有一个您正在迭代的数据示例会很有帮助。我刚刚测试了您的代码，它似乎运行良好。您面临的问题到底是什么？可能更喜欢使用CSS属性
-在enter
，
-在leave to
，
-move
，
-enter active
，
-leave active等…
，以便更轻松地处理此类内容。将减少模板的混乱程度。@TUTAMKHAMON当我添加内部转换组时，我得到了ReferenceError:未定义字母。就好像它不能像普通的
一样通过转换组传递字母prop一样。您的代码在这方面工作得很好。你能链接到复制品吗？我正在将Vue注入PHP，这不是基于Vue模板构建的，所以我不能创建单独的组件。这是为我做的，谢谢！悬赏金在我得到这个答案之前就到期了，但我会努力想办法把它奖励给你。@kdsprogrammer很乐意帮忙