Question

我认为这可能是一个错字，但无法找到问题。我有这个Vuejs模板，如果我删除v-if验证就可以正常渲染。但是当我使用它时，它根本不会渲染任何东西。已经调试器返回true，并返回false，逻辑测试只返回true一次，如预期的那样。谁能发现我做错了什么？

template: `
  <div class="workbench container">
    <ul class="collapsible popout" data-collapsible="expandable">
      <collapsible-cards
        v-for="tipo, index in tiposCollapsibles"
        v-if="mostraApenasPerfilEspecificado(perfil, tipo)"
        v-bind:key=index
        v-bind:dados="tipo"
      >
      </collapsible-cards>
    </ul>
  </div>`,

mounted: function() {
  for (key in this.tiposCollapsibles) {
    if (this.tiposCollapsibles[key].perfisQuePodemVer.indexOf(this.perfil) >= 0) {
        this.queryTeleconsultorias(key);
    }
  }
},

methods: {
  mostraApenasPerfilEspecificado(perfil, tipo) {
    tipo['perfisQuePodemVer'].forEach(function(value) {
      if (perfil === value) {
        return true;
      }
    });
    return false;
  },
  ...

更新：对于遇到同样问题的人，我最终使用的是计算属性，而不是方法本身。显示/隐藏元素的v-if / -v-show行为已移至计算属性。最后我不确定这是否与Vuejs有关。这是工作代码：

template: `
  <div class="workbench container">
    <ul class="collapsible popout" data-collapsible="expandable">
      <collapsible-cards
        v-if="showTipoCollapsibles[index]"
        v-for="tipo, index in tiposCollapsibles"
        v-bind:key="index"
        v-bind:object="tipo"
      >
      </collapsible-cards>
    </ul>
  </div>`,

mounted: function() {
  this.executeQuery(this.perfil);
},

computed: {
  showTipoCollapsibles: function() {
    let perfisVisiveis = {};
    for (tipo in this.tiposCollapsibles) {
      perfisVisiveis[tipo] = this.tiposCollapsibles[tipo].enabledForProfiles.includes(this.perfil);
    }
    return perfisVisiveis;
  },
},

methods: {
  executeQuery: function(value) {
    if (value === 'monitor') {
      var query = gql`query {
        entrada(user: "${this.user}") {
          id
          chamadaOriginal {
            datahoraAbertura
            solicitante {
              usuario {
                nome
              }
            }
          }
          ...

Answer 1

从v-if更改为v-show

v-show="mostraApenasPerfilEspecificado(perfil, tipo)"

您还可以使用template将v-if外部子组件用作

template: `
  <div class="workbench container">
    <ul class="collapsible popout" data-collapsible="expandable">
      <template v-for="(tipo, index) in tiposCollapsibles">
        <collapsible-cards
          v-if="mostraApenasPerfilEspecificado(perfil, tipo)"
          v-bind:key="index"
          v-bind:dados="tipo">
        </collapsible-cards>
      </template>
    </ul>
  </div>`,

如果不起作用，请分享现场演示

Answer 2

Bootstrap-Vue中似乎有一个类似的错误，其中v-if仅适用于非Bootstrap元素。

使用其他相同的代码，则当this.error = true时该元素将不会出现：

<b-alert v-if="error" variant="danger">Failed!</b-alert>

但这会：

<div v-if="error">Failed!</div>

Vuejs：方法与v-如果不工作

2 个答案: