Why Ion Toggle its not working?

<template>
  
  <ion-content>

    <ion-list>
      <ion-item>
        <ion-label>Toggle Example</ion-label>
        {{toppings}}
        <ion-toggle 
          @ionChange="toppings.value.push($event.target.value)"
          value="pepperoni"
          :checked="toppings.value.indexOf('pepperoni') !== -1">
        >
        </ion-toggle>
      </ion-item>
    </ion-list>
   
  </ion-content>
    
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { 
  IonContent,
  IonList,
  IonLabel,
  IonItem,
  IonToggle   
} from '@ionic/vue';

export default defineComponent({
  components: {
    IonContent,
    IonList,
    IonLabel,
    IonItem,
    IonToggle 
   
  },
  setup() {
    const toppings = ref([]);
    
    return {
      toppings,
    }
  }
});
</script>

Another thing is @ionChange wont accept inline toppings.value
it will allow as function, this is weird

@donpuerto I think, It should be like this

“toppings.indexOf(‘pepperoni’) !== -1”

For ionChange, It should be function from typescript as it is not detecting your changes from toppings. On this case you can use ngModel and ngModelChange

1 Like

@harveyelsisura it says toppings its a Boolean type. So error.

By the way im using Vue js.
which is better than Angular :wink:

It is very obvious that your toppings is undefined

PS: Focus on your issues. Only ignorant will compare what’s better

lol, don’t get too emotional mate and get carried away :slight_smile:

1 Like

Hope you find your solution ignorant

Yep, surely did. It works well.

1 Like

Hi everyone,

I wanted to take a moment to remind everyone of our Code of Conduct, specifically:

Communication through any of Ionic’s channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.

Please be mindful of this when interacting on Ionic’s channels. Thanks!

1 Like

This topic was automatically opened after 22 hours.