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

Question

如果我的问题很愚蠢，我提前道歉--这里是Vue新手，但非常渴望学习！

为了创建一个界面来管理 Web 应用程序中的用户权限，我制作了一个组件，我想在其中创建一个带有嵌套 v-fors 的 table。对于每一行，我想要 5 个单元格 ()：第一个包含文本，具体取决于对象 permisos 的当前迭代，另外 4 个应该从对象 tipos_permisos（这是一个具有 'fixed' 值的对象）。

问题：当我尝试编译时，出现多个错误，声称某些标签没有匹配的结束标签。我认为这是由于 v-for 嵌套在另一个 v-for and/or 中，而 v-if 嵌套在最里面的 v-for... 或类似的东西中。声称没有匹配的标签，或者该元素使用 v-else 而没有对应的 v-if ：/ 我已经尝试手动写出最后 4 个单元格（不使用 tipos_permisos 对象）但即便如此，我还是会出错。在这种情况下，声称 , 并且没有匹配的结束标记。

想要的结果：请注意，对于列出的某些资源，某些权限可能不适用（即，日志查看器始终是只读的，因此它没有 C（创建）、U（更新）或D（删除）权限，因此有条件显示复选框或图标）

我的组件：

<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>

如果有什么不清楚的地方，请告诉我，以便我提供更多信息。

Answer 1

v-for 后面少了一个“=”：

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

这部分没看懂：

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

如果你代码中的undefined是一个字符串，你的条件应该是

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

如果是真正的undefined，应该是这样的：

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

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

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

html-table

laravel

vue.js

v-for