Framework7 切换组件不是反应式的答案

【问题标题】：Framework7 toggle component not being reactiveFramework7 切换组件不是反应式的
【发布时间】：2018-10-24 23:15:25
【问题描述】：

我将 Vue 和 Framework7 用于 Android 应用程序。

我在一个列表中有 4 个切换，一次只能激活一个。此外，必须禁用唯一的活动切换，这样就永远不会没有活动的切换。

我的问题是，尽管我更改了 estadovariable，但更改似乎在组件中没有反应。

初始状态正常（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
这会触发切换 0 中的 @change，这会将 estado 再次设置为 0

【问题讨论】：

您需要知道change 是打开还是关闭。打开时只需要设置estado。

标签： vue.js html-framework-7

【解决方案1】：

将方法移至<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>

【讨论】：