[Vuejs]-Vue.js – How to prevent re-render whole component?

by

0👍

After reading your question I imagine you have an login button.. than you can do following – add a click event to your button like this:

<b-button @click="login = !login> LOGIN </b-button> //use this if you want to switch your modal each time on click
<b-button @click="login = false"> LOGIN </b-button> //use this if you only want to change it one time after click

Here you are switching your boolean if it’s firstly true after clicking your button it will be false.

Than you have to define your property in your data return like this:

data() {
  return {
    login: true,
  }
}

and afterwards you can check it in your template, like you have done it before:

<p v-if="login == true">Login is true</p>
<p v-if="login == false">Login is false</p>

<!-- OR -->
<p v-if="login == true">Login is true</p>
<p v-else>Login is false</p>

You can also add a method to your click event and check it there if you don’t want to have code like login = !login in your template!

Please let me know if this helps you!

0👍

The re-render issue is unlikely to be related to the children, could you eloborate the example more? As you can see in the example, content of the children changes without opening the modal second time, it should be related to unwanted change on the "modalShow", how and where are you changing this data.

window.onload = () => {
  new Vue({
    el: '#app',
    data() {
      return {
        modalShow: false,
        firstPage: true,
      }
    },
    methods: {
        toggle() {
            this.modalShow = !this.modalShow;
            setTimeout(() => this.firstPage = !this.firstPage, 300);
        }
    }
  })
}
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.js"></script>
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>

<div id="app">
  <div>
    <b-button @click="toggle">Launch demo modal</b-button>

    <b-modal v-model="modalShow">
      <p class="my-4" v-if="firstPage">1st Component</p>
      <p class="my-4" v-else>2nd Component</p>
    </b-modal>
  </div>
</div>

Leave a comment