Question

15

Vue.js v-if not reacting to variable change

rated 0 times [ 16] [ 1] / answers: 1 / hits: 28879 / 8 Years ago, tue, january 31, 2017, 12:00:00

i'm playing around with vue.js and have some struggle in using v-if correctly.

i'm trying to have a conditional template rendering inside a template. in the created method, the variable isloaded is set to true, which should lead the template to be rerendered and let the Loading Data message disappear.

However, the log indicated, the delay of 2s works, so the callback is reached, but it looks like i'm not updating the data variables correctly.

I tried already several things and now i changed true/false to be strings in order to be closer to the exampled given on the official homepage, but still no success. i hope you can help me and therefor thanks a lot in advance.

please find below the interesting codesnippets:

var step1 = Vue.component('step1', {

  template: '#step1',

  data: function() {

    return {

      accounts: [],

      isloaded: 'false'

    }

  },

  created: function() {

    console.log(created);

    setTimeout(function() {

      console.log(times over);

      this.isloaded = 'true';

      this.accounts = [{

        id: 1234,

        name: germany

      }];

    }, 2000);

  },

  methods: {

    loaded: function() {

      console.log(this.isloaded === 'true');

      return this.isloaded === 'true';

    }

  }



})



new Vue({

  el: '#main'

});

<script src=https://unpkg.com/[email protected]/dist/vue.js></script>

<template id=step1>

  <div class=step1>

    <h1>Welcome please choose your account:</h1>

    <template v-if=isloaded === 'false'>

      <p>Loading Data</p>

    </template>

    <template v-else>

      <select>

        <template v-for=account in accounts>

          <option :value=account.id>{{ account.name }}</option>

        </template>

      </select>

    </template>



  </div>

</template>



<div id=main>

  <step1></step1>

</div>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

seth

Add To Favorites

Follow

Total Points: 307

Total Questions: 114

Total Answers: 96

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

answered 8 Years ago brodyfrancisi · Accepted Answer

From the Vue.js - Reactivity in Depth docs:

For example, when you set vm.someData = 'new value', the component
will not re-render immediately. It will update in the next “tick”,
when the queue is flushed.

With the data being mutated in the created lifecycle hook, we need to use $nextTick More info on that can be found in the above page.

var step1 = Vue.component('step1', {

  template: '#step1',

  data: function() {

    return {

      accounts: [],

      isloaded: false

    }

  },

  created: function() {

    console.log(created);

    var self = this;

    setTimeout(function() {

      console.log(times over);

      self.$nextTick(function() {

        self.isloaded = true;

        self.accounts = [{

          id: 1234,

          name: germany

        }];

      })



    }, 2000);

  }



})



new Vue({

  el: '#main'

});

<script src=https://unpkg.com/[email protected]/dist/vue.js></script>

<template id=step1>

  <div class=step1>

    <h1>Welcome please choose your account:</h1>

    <template v-if=isloaded===false>

      <p>Loading Data</p>

    </template>

    <template v-else>

      <select>

        <template v-for=account in accounts>

          <option :value=account.id>{{ account.name }}</option>

        </template>

      </select>

    </template>



  </div>

</template>



<div id=main>

  <step1></step1>

</div>

However, if you place the code that is loading the data inside a method, and call that method from the created hook. It works without $nextTick.

methods: {

    loadData: function() {

        var self = this;

        setTimeout(function() {

            console.log("times over");

            self.isloaded = true;

            self.accounts = [{

                id: 1234,

                name: "germany"

            }];

        }, 2000);

    }

},

created: function() {

    console.log("created");

    this.loadData();

}