0

I am trying to create easy HTML table with Vue.js. I would like to add easy Transition, but the animation does not show(it just waits for 2s) and I do not know why?

HTML:

` 

              <tr >
                <td colspan="12">
                  <table style="background: rgb(188, 5, 131)" class="table table-responsive">
                    <thead>
                      <tr>
                        <th scope="col">ID</th>
                        <th scope="col">Character ID</th>
                        <th scope="col">Is alive?</th>
                        <th scope="col">Years</th>
                        <th scope="col">Actions</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr class="child" v-for="child in item.children.has_nemesis.records" :key="child.data.ID">
                        <td>{{ child.data.ID }}</td>
                        <td>{{ child.data['Character ID'] }}</td>
                        <td>{{ child.data['Is alive?'] }}</td>
                        <td>{{ child.data.Years }}</td>
                        <td>
                          <button @click="removeItem(child, item)">
                            Remove
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </td>
              </tr>
            </template>
            </transition>

` whole code:https://jsfiddle.net/barabas/vzqLdxkb/2/

Petr
  • 103
  • 6
  • template elements don't get included in the final rendered DOM. Vue's `` element only works on the element it's wrapped around transitioning in/out of the DOM. My guess is that since the template element does not exist, the transition won't work. Also, whenever possible `v-if`, `v-for`, etc. should be placed on real elements unless you have very specific reasons not to. – yoduh Jan 19 '23 at 20:16
  • 1
    Consider simplifying your example to a single row with a single cell. Make sure the fiddle/sandbox you present has no errors and explain in clear what you want to achieve and what you have tried. What you presented so far has multiple errors. Before one can address the transition problem they'd need to fix the other errors, which are outside the scope of your question, making your question off-topic. – tao Jan 19 '23 at 22:44

0 Answers0