Feuer verschiedene Funktionen je nach Checkbox-Status in Vue2

Question

Ich würde gerne wissen, gibt es eine Möglichkeit, benutzerdefinierte Funktionen feuern - eine Funktion, wenn Kontrollkästchen ändert sich zu wahren Wert und eine andere, wenn es auf false-Wert (ohne $ watch) ändert.

Zum Beispiel: I-Eingang in root div

gewickelt haben

<div id="root"> 
    <input type="checkbox" v-model="editModeOn"> 
</div> 

und eine vue Instanz mit disableEditMode (auf Checkbox deaktiviert) und enableEditMode (auf Kontrollkästchen aktiviert)

new Vue({ 
    el: '#root', 
    props: { 
     editModeOn: { 
      type: Boolean, 
      default: false 
     } 
    }, 
    methods: { 
     disableEditMode() { 
      // some code 
     }, 
     enableEditMode() { 
      // some code 
     } 
    }, 
}); 

Wie kann ich diese Funktionalität erreichen? Vielen Dank!

Answer 1

Behandeln Sie das Änderungsereignis.

@change="editModeOn ? enableEditMode() : disableEditMode()" 

new Vue({ 
 
    el: '#root', 
 
    data:{ 
 
     editModeOn: false 
 
    }, 
 
    methods: { 
 
     disableEditMode() { 
 
      console.log("disable") 
 
     }, 
 
     enableEditMode() { 
 
      console.log("enable") 
 
     } 
 
    }, 
 
});

<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="root"> 
 
    <input type="checkbox" v-model="editModeOn" @change="editModeOn ? enableEditMode() : disableEditMode()"> 
 
</div>