1

对此有一个建议的答案，但该解决方案对我不起作用。我有一个嵌套v-for并希望在最里面的 li 元素被我的计算语句删除或添加时为其设置动画。我当前的代码如下所示：

    <transition-group @before-enter="beforeEnter" @enter="enter" @leave="leave" tag="ul" v-if="computedProviders">
      <li v-for="(letter, index) in computedProviders" :key="index">
        <div>
          <p>{{index.toUpperCase()}}</p>
        </div>
        <transition-group :letter="letter" tag="ul" class="list" @before-enter="beforeEnter" @enter="enter" @leave="leave">
          <li v-for="provider in letter" :key="provider.last_name">
            <div>
              <a :href="provider.permalink">
                {{provider.thumbnail}}
              </a>

              <div>
                <h3>
                  <a :href="provider.permalink">
                    {{provider.last_name}}, {{provider.first_name}} <span>{{provider.suffix}}</span><br>
                    <p>{{provider.specialty}}</p>
                  </a>
                </h3>
              </div>
            </div>
          </li>
        </transition-group>
      </li>
    </transition-group>
  </div>

外部过渡组工作正常，但是当我设置内部过渡组时，我得到了

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'
       }
      ]
}
4

2 回答 2

1

使用 DOM 内模板的警告之一是浏览器会在Vue 获取DOM之前解析它。浏览器不知道是什么<transition-group tag="ul">，所以它会被忽略。相反，它看到了<li>另一个内部<li>。由于<li>元素通常不能嵌套，因此浏览器会<li v-for="provider in letter" :key="provider.last_name">在<li>定义letter.

移除 Vue 并检查 DOM会发现问题：

吊起的 DOM

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

解决方案1：<template>包装

如果你需要使用 in-DOM 模板，<transition-group>用 a包裹内部，<template>这样浏览器就会忽略它：

<transition-group tag="ul">
  <li v-for="(letter, index) in computedProviders" :key="index">
    <template> 
      <transition-group tag="ul">
        <li v-for="provider in letter" :key="provider.last_name"></li>
      </transition-group>
    </template>
  </li>
</transition-group>

演示 1

解决方案 2：字符串模板

将模板移动到字符串中（使用template选项），这样可以避免 DOM 解析警告：

new Vue({
  template: 
    `<transition-group tag="ul">
       <li v-for="(letter, index) in computedProviders" :key="index">
         <transition-group tag="ul">
           <li v-for="provider in letter" :key="provider.last_name"></li>
         </transition-group>
       </li>
     </transition-group>`
  //...
}).$mount('#providers')

演示 2

于 2021-05-08T05:53:42.157 回答
0

真的不知道是什么导致了错误，但尝试创建一个新组件，该组件接受letter作为道具并包含您的内部<transition-group>. 然后将这个新组件嵌入到您的 rootv-for中。

它应该给出类似的东西：

<transition-group @before-enter="beforeEnter" @enter="enter" @leave="leave" tag="ul" v-if="computedProviders">
  <li v-for="(letter, index) in computedProviders" :key="index">
    <div>
      <p>{{index.toUpperCase()}}</p>
    </div>
    <my-component :letter="letter" />
  </li>
</transition-group>
于 2021-05-03T13:25:41.337 回答