时间戳

首页 > 解决方案 > (Vue + Laravel) v-if / v-else inside throws no matching end tag 错误

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

问题描述

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

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

问题：当我尝试编译时，我收到多个错误，声称某些标签没有匹配的结束标签。我认为这是由于 v-for 嵌套在另一个 v-for 中和/或 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>

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

标签： laravelvue.jshtml-tablev-for

解决方案

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

如果它是一个真正的未定义，它应该是这样的：

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

推荐阅读