Reaktivní podmínka ve Vue

Pojďme zařídit, aby podmínka byla reaktivní. Uděláme například tak, aby se prvek skrýval po kliknutí na tlačítko. Předpokládejme, že máme následující odstavec:

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

Uděláme tak, aby byl náš odstavec zpočátku zobrazen:

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

Vytvořme nyní tlačítko, po jehož kliknutí se odstavec skryje:

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

Spojená metoda změní vlastnost visible na false, čímž způsobí, že náš odstavec zmizí:

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