Reaktivni uslov u Vue

Hajde da učinimo da uslov bude reaktivan. Na primer, napravimo tako da se element sakrije klikom na dugme. Pretpostavimo da imamo sledeći paragraf:

App.vue<template>
  <p v-if="visible">text</p>
</template>

Učinimo da naš paragraf inicijalno bude prikazan:

javascriptdata() {
  return {
    visible: true,
  }
}

Sada napravimo dugme, čijim klikom će se paragraf sakriti:

App.vue<template>
  <button @click="hide">sakrij</button>
  <p v-if="visible">text</p>
</template>

Povezana metoda će promeniti svojstvo visible u false, čime će naš paragraf biti sakriven:

javascriptmethods: {
  hide: function() {
    this.visible = false;
  }
}