Компонент переключения Framework7 не реагирует - PullRequest
Новая
       36

Компонент переключения Framework7 не реагирует

0 голосов
/ 24 октября 2018

Я использую Vue и Framework7 для приложения для Android.

У меня есть 4 переключателя внутри списка, в которых одновременно может быть активен только один.Кроме того, единственное активное переключение должно быть отключено, чтобы никогда не было никаких активных переключателей.

Моя проблема в том, что, несмотря на то, что я изменяю переменную estado, изменения в компоненте, похоже, не реагируют.

Исходное состояние работает нормально (estado === 0, загрузка первого элемента проверена и отключена).Дальнейшее взаимодействие с другими переключателями не приводит к ожидаемым результатам. 

<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">
        <f7-toggle :disabled="estado === Estados.MANUAL" :checked="estado === Estados.MANUAL" @change="CambiarEstado(Estados.MANUAL)" slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Manual/Telepase">
        <f7-toggle :disabled="estado === Estados.MANUALTELEPASE" :checked="estado === Estados.MANUALTELEPASE" @change="CambiarEstado(Estados.MANUALTELEPASE)" slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Telepase">
        <f7-toggle :disabled="estado === Estados.TELEPASE" :checked="estado === Estados.TELEPASE" @change="CambiarEstado(Estados.TELEPASE)" slot="after"></f7-toggle>
      </f7-list-item>
      <f7-list-item title="Vía Cerrada">
        <f7-toggle :disabled="estado === Estados.CERRADO" :checked="estado === Estados.CERRADO" @change="CambiarEstado(Estados.CERRADO)" slot="after"></f7-toggle>
      </f7-list-item>
    </f7-list>
  </f7-page>
</template>
<script>
    export default {
        data: function(){
            return {
                estado:0,
                Estados : {
                    MANUAL: 0,
                    MANUALTELEPASE: 1,
                    TELEPASE: 2,
                    CERRADO:3
                },
                manual_active:''
            }
        },
        methods:{
            CambiarEstado(estado_){
                this.estado = estado_;
            }
        }
  };
</script>

РЕДАКТИРОВАТЬ: кажется, что @change вызывается дважды, когда я нажимаю другой переключатель:

  • Начальное состояние estado = 0 и переключатель 0 отмечен
  • Я нажимаю переключатель 3, который вызывает @change и устанавливает estado в 3
  • Это запускает @change в переключателе 0, который снова устанавливает estado в 0

1 Ответ

0 голосов
/ 24 октября 2018

Перемещен метод к событию <f7-list-item> @click.Несмотря на неодинаковое поведение (щелчки в любом месте элемента списка вызывают переключение, а не только нажатие переключателя), это нормально для меня. 

<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>
...