[Vuejs]-Framework7 toggle component not being reactive

by

0👍

Moved the method to the <f7-list-item> @click event. Despite not the exact same behaviour (clicks anywhere on the list item triggers the toggle, instead of only clicking in the toggle) this is ok for me.

<template>
  <f7-page>
    <f7-navbar title="Gestión de pantalla" back-link="Back"></f7-navbar>
    <f7-list class="components-list searchbar-found">
      <f7-list-item title="Manual" @click="CambiarEstado(Estados.MANUAL)">
        <f7-toggle :disabled="estado === Estados.MANUAL" :checked="estado === Estados.MANUAL"  slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Manual/Telepase" @click="CambiarEstado(Estados.MANUALTELEPASE)" >
        <f7-toggle :disabled="estado === Estados.MANUALTELEPASE" :checked="estado === Estados.MANUALTELEPASE" slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Telepase" @click="CambiarEstado(Estados.TELEPASE)" >
        <f7-toggle :disabled="estado === Estados.TELEPASE" :checked="estado === Estados.TELEPASE" slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Vía Cerrada" @click="CambiarEstado(Estados.CERRADO)">
        <f7-toggle :disabled="estado === Estados.CERRADO" :checked="estado === Estados.CERRADO"  slot="after"></f7-toggle>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>

Leave a comment