(Vue + Laravel) v-if / v-else inside <td> throws no matching end tag error

Question

I apologize in advance if my question is silly-- Vue newbie here but very eager to learn!

In order to create an interface to manage user privileges in a web app, I've made a component in which I want to create a table with nested v-fors. For each row, I want 5 cells (): the first one includes text depending on the current iteration of object permisos and the other 4 should be created from the object tipos_permisos (which is an object with 'fixed' values).

The problem: When I try to compile, I get multiple errors claiming that some tags have no matching end tag. I assume it is due to the v-for nested inside another v-for and/or the v-if inside the innermost v-for... or something like this. The claim is that has no matching tag or that the element uses v-else without corresponding v-if :/ I've tried writing out the last 4 cells manually (without using the tipos_permisos object) but even then, I get errors. In this case, claiming that , and have no matching end tag.

The desired result: Please note that for some of the resources listed, some of the privileges might not apply (i.e., the log viewer is read-only always so it doesn't have the C (create), U (update) or D (delete) privileges, hence the conditional to show either a checkbox or an icon)

My component:

<template>
  <form :action="usr.url.savepermisos" method="post" class="">
    <div class="card">
      <div class="card-header bg-gd-primary">
        <h3 class="card-title">Privilegios de {{ usr.nombre }}</h3>
      </div>
      <div class="card-content">
        <p class="mb-3">
          El usuario
          <span class="font-w700">{{ usr.nombre }}</span>
          tiene los siguientes privilegios:
        </p>
        <table class="table">
          <thead>
            <tr>
              <th>Recurso</th>
              <th>Alta / Creación</th>
              <th>Visualización</th>
              <th>Edición</th>
              <th>Eliminación</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(recurso, idxrecurso) in permisos">
              <td :data-order="recurso.id">{{ recurso.etiqueta }}</td>
              <td class="align-middle" v-for="(color,tp) in tipos_permisos">
                <label :class="'checkbox checkbox-' + color + ' mycheckbox'" v-if="(typeof recurso[tp] !== "undefined")">
                  <input type="checkbox" class="checkbox-input check_permiso" />
                  <span class="checkbox-indicator"></span>
                </label>
                <i class="fas fa-minus-square fa-lg text-muted" data-toggle="tooltip" title="N/A" v-else></i>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        tipos_permisos: {
          'C': 'success',
          'R': 'info',
          'U': 'warning',
          'D': 'danger'
        }
      }
    },
    props: [
      'usr',
      'permisos',
      'perm_log'
    ]
  }
</script>

If something is unclear please let me know so that I can provide further info.

Answer 1

There is a missing "=" after v-for:

<td class="align-middle" v-for"(color,tp) in tipos_permisos">

I didn't understand this part:

v-if="(typeof recurso[tp] !== "undefined")"

If undefined in your code is a string, your condition should be

v-if="recurso[tp] !== 'undefined'"

If it's a real undefined, it should be like this:

v-if="recurso[tp] !== undefiened"