Vue.js: Only load component if user clicks button

Question

I have code that looks like the code below. how do I set this up so the components "dataPart1' and "dataPart2" won't load unless a user clicks a button to view the data? In other words, I don't want the data to just automatically show, but only if the user chooses to see it via a button click option.

var app = new Vue({
  el: '#data',
  data: {
    show: true,
    something: true,
  },
  components: {
    dataPart1,
    dataPart2
  },
  ...other stuff...
  }
});

What do you mean by "load"? Do you mean you don't want the component definitions to be loaded, saving bandwidth or do you mean you just don't want them to display? — Phil
– Phil, Commented Oct 25, 2018 at 23:54

tony19 · Accepted Answer · 2022-07-15 20:28:45Z

7

In order to conditionally display content in the templates (text, html, components, etc), we can use conditional rendering of Vue.js and specifically v-if directive.

Short explanation: we can display content depending on certain variables defined in our component. And change value of that variable on certain events, e.g. button click.

Please, take a look at example on CodeSandbox of loading two components conditionally on buttons clicks.

In App.vue file, we have 2 buttons that trigger a handler on click and display component's if corresponding value is true.

edited Jul 15, 2022 at 20:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 26, 2018 at 0:06

aBiscuit

4,7521 gold badge21 silver badges30 bronze badges

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

2 Comments

user9542422 Over a year ago

is there a way to add a new component each time I click on a single button? then I would use a close button in each component so it works properly.

pjdupreez Over a year ago

Displaying and Mounting are 2 separate things...

Collectives™ on Stack Overflow

Vue.js: Only load component if user clicks button

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related