Ionic 4 & vuejs app (checkbox problem)

hello, i’m quite new to ionic and i know that vuejs is only on beta mode but i still wanted to try a simple todos app. i use firebase for my db. it works fine : i can add a new item and display everything but the problem is, the checkbox doesn’t show the checked symbol.

i have a simple object with isChecked by default on false :

const newItem = { name: this.name, isChecked: false }

when i click on the box for the specific item, it changes to true and if i click again, it changes to false, etc. it works as expected (makes the changes on firestore too) but the symbol never changes. it’s always unchecked.

i basically used this doc https://ionicframework.com/docs/api/checkbox for vue

even when i used this (and adding the key):

  <ion-list>
    <ion-item v-for="entry in form">
      <ion-label>{{entry.val}}</ion-label>
      <ion-checkbox
        slot="end"
        @input="entry.checked = $event.target.value"
        :value="entry.isChecked">
      </ion-checkbox>
    </ion-item>
  </ion-list>

with the same data array :

    form: [
      { val: 'Pepperoni', isChecked: true },
      { val: 'Sausage', isChecked: false },
      { val: 'Mushroom', isChecked: false }
    ];

the same problem occurs. i even tested with ionic’s latest version but it’s not working.

here is the example from the documentation, pepperoni is set to true and yet it doesn’t show it.

can somebody help me please ?

1 post - 1 participant

Read full topic