Vuejs: method with v-if not working

Question

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 computed property, rather than a method itself. The v-if/-v-show behaviour to show/hide elements was moved to the computed 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);
},

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

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

Niklesh Raut · Accepted Answer · 2017-11-27 11:42:18Z

2

Change from v-if to v-show

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

You can also use template to use v-if outside child component 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

edited Nov 27, 2017 at 11:42

answered Nov 27, 2017 at 11:00

Niklesh Raut

34.9k17 gold badges82 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vamsi Krishna Over a year ago

How would that make any difference?

Niklesh Raut Over a year ago

Because v-for execute first and then v-if/v-show in the same tag, becuase v-if not rendered anything in browser it will not work. And v-show will just show/hide but work as expected and keep element in the browser.

Vamsi Krishna Over a year ago

yup v-show toggles the css display property andv-if toggles whether DOM element shold be rendered or not. But if v-if='true' it should render right

Vini.g.fer Over a year ago

Adding the template tag did not work. Got tipo undefined in JS console, as tipo comes from the v-for value.

Niklesh Raut Over a year ago

@Vini.g.fer : Try by reversing v-if by v-for, as update in answer

|

Léo Freitas · Accepted Answer · 2022-10-14 00:19:29Z

0

Actually, you have to use computed rather than method.

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

answered Oct 14, 2022 at 0:19

Léo Freitas

3031 gold badge3 silver badges5 bronze badges

Comments

Juha Untinen · Accepted Answer · 2018-07-24 12:11:43Z

-1

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>

answered Jul 24, 2018 at 12:11

Juha Untinen

1,9071 gold badge26 silver badges44 bronze badges

1 Comment

Juha Untinen Over a year ago

It appears this is by design. To control a Bootstrap-Vue element show/hide, there is a property show that accepts a boolean value. By default, it is hidden (implicit show=false). To toggle it, you are supposed to eg. <b-alert :show="myFunc"> where myFunc() returns a boolean.

Collectives™ on Stack Overflow

Vuejs: method with v-if not working

3 Answers 3

8 Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

1 Comment

Related