Question

我正在为Android应用程序使用Vue和Framework7。

我在列表中有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
这会触发切换0的@change，从而将estado再次设置为0

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

Framework7切换组件没有反应

1 个答案: