Reaktīvs nosacījums Vue

Padarīsim tā, lai nosacījums būtu reaktīvs. Piemēram, padarīsim tā, lai elements paslēpjas, noklikšķinot uz pogas. Pieņemsim, ka mums ir šāds rindkopa:

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

Padarīsim tā, lai mūsu rindkopa sākotnēji būtu redzama:

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

Tagad izveidosim pogu, noklikšķinot uz kuras rindkopa paslēpsies:

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

Piesaistītā metode mainīs īpašību visible uz false, tādējādi liekot mūsu rindkopai paslēpties:

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