@nstudio/nativescript-checkbox: Toggle is being called twice when binding the checked to an attribute.

[leftundersun]

If you make it this way:

<template>
  <Page>
    <StackLayout
      orientation="vertical">
      <check-box
        v-for="(option, index) in options"
        :key="index"
        :text="option"
        :checked="index == selected"
        boxType="circle"
        @tap="selectOption(index)"
        @checkedChange="changed(index)"/>
    </StackLayout>
  </Page>
</template>

<script lang="coffee">

export default
  
  data: () ->
    {
      options: [
        "First"
        "Second"
        "Third"
        "Fourth"
      ]
      selected: null
    }

  methods:

    selectOption: (index) ->
      if this.selected == index
        this.selected = null
      else
        this.selected = index

    changed: (index) ->
      console.log "changed #{index}"

</script>

and click on an already selected option, you became able to select another one.

[NathanWalker]

Hi @leftundersun check out this sample:
https://stackblitz.com/edit/nativescript-checkbox-example?file=src%2Fapp%2Fitem%2Fitems.component.html

Although it's shown in Angular you can adapt to Vue this way (feel free to adjust Vue syntax as needed):

<check-box
    v-for="(option, index) in options"
    :key="index"
    :text="option"
    :checked="checkboxValue"
    @checkedChange="checkedChange"
    @loaded="checkboxLoaded"
    boxType="circle"
    fontSize="20"
    ios:fillColor="#fff"
    onTintColor="#007A42"
  />


checkbox: CheckBox;
checkboxValue: boolean;

  checkboxLoaded(e) {
    this.checkbox = e.object;
  }

checkedChange() {
    if (this.checkbox) {
      this.checkboxValue = this.checkbox.checked;
      console.log('Checkbox value:', this.checkbox.checked);
    }
  }