I think this might be a typo somewhere, but can't find the issue. I have this Vuejs template, that renders just fine if I remove the v-if verification. However when I use it, it does not render anything at all. Already placed a debugger both in return true, and return false, and the logic test returns true only once, as expected. Can anybody spot what am I doing wrong?

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;
  },
  ...

Update: For anyone who is having the same problem, I ended up using a puted property, rather than a method itself. The v-if/-v-show behaviour to show/hide elements was moved to the puted property. In the end I was not sure if this was an issue with Vuejs. Here is the working code:

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);
},

puted: {
  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
              }
            }
          }
          ...

I think this might be a typo somewhere, but can't find the issue. I have this Vuejs template, that renders just fine if I remove the v-if verification. However when I use it, it does not render anything at all. Already placed a debugger both in return true, and return false, and the logic test returns true only once, as expected. Can anybody spot what am I doing wrong?

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;
  },
  ...

Update: For anyone who is having the same problem, I ended up using a puted property, rather than a method itself. The v-if/-v-show behaviour to show/hide elements was moved to the puted property. In the end I was not sure if this was an issue with Vuejs. Here is the working code:

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);
},

puted: {
  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
              }
            }
          }
          ...

• javascript
• vuejs2

• Check the typo v-bind:key=index, it should be v-bind:key="index" – Vamsi Krishna Commented Nov 27, 2017 at 11:25

3 Answers 3

Change from v-if to v-show

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

You can also use template to use v-if outside child ponent as

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

If not work, share live demo

Actually, you have to use puted rather than method.

puted: {
  showTipoCollapsibles: function() {},
  executeQuery: function(value) {},
},
methods: {}

There appears to be a similar bug in Bootstrap-Vue, where v-if only works on non-Bootstrap elements.

With otherwise identical code, this element will not appear when this.error = true:

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

But this will:

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