javascript - Vuejs : method with v-if not working

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

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