CODEWITHSUNDEEP
htmlvue.jscheckbox
Michael Pietzsch
Michael Pietzsch

Reputation: 145

Vue JS - Checkbox / if Checked do This if unchecked do that

im trying to create a checkbox that runs one function when it is initaly checked and runs another when it is then unchecked.

here something ive tryied out theres also a variable that already has been read out and represents the current status

   <input type="checkbox" :checked="e.Processed == true" v-model="toggle" true-value= functionTrue false-value="no">

Upvotes: 2

Views: 8052

Answers (2)

Michael Pietzsch
Michael Pietzsch

Reputation: 145

How i solved it

for the input type

  <input type="checkbox"  :checked="e.Processed === true" @change="onChangeProcessed($event,e)">

the function checks whats the current state

          onChangeProcessed(e,d) {
           if (e.target.checked == true) {
                    console.log(e);
                    console.log("ACTIVE");
                    console.log(d);
                    console.log(e.target.checked);
                    this.markReady(d);
                    
                    
            };
          if (e.target.checked == false ) {
                    console.log(e);
                    console.log("OFF");
                    console.log(d);
                    console.log(e.target.checked);
                    this.markNotReady(d);

               /*       console.log(e.target.value);
                    this.markNotReady(d) */
            }
},

Upvotes: 2

Peter Stenger
Peter Stenger

Reputation: 175

Just register an @change handler.

   const onChange = (event) => {
       // handle logic
   }

   <input type="checkbox" :checked="e.Processed == true" v-model="toggle" true-value= functionTrue false-value="no" @change="onChange($event)">

Upvotes: 4

Related Questions