q-btn-toggle not displaying initial value

michaelb

0.15.14

Template

<q-btn-toggle v-model="book.owned" toggle-color="primary"
      :options="ownedOptions"/>

Script

export default {
  data () {
    return {
      book: {'owned': 1},
      ownedOptions: [
        {label: 'We have this book', value: 1},
        {label: 'Wish list', value: 0}
      ]

I have a single page component for a PWA that fetches a book object and populates a form with the record values. The form is fine except for a toggle button which should display “We have this book” if the book.owned variable is 1 and “Wish list” if it is 0.

On my development machine the form works flawlessly. In production, as the form loads the default value of 1 for book.owned causes the button to briefly to highlight the correct label and then the button is cleared (neither option is selected).

If I display the underlying model value in the template, it will show 1 or 0 as it should, but the toggle button still has neither label highlighted.

I have tried using a q-select instead and it behaves the same way - fine on dev machine, wrong on public site.

If I click on the button it displays the highlighted label as it should and updates the value of the underlying model. The problem is with in the initial display when the form is loaded.

Can anyone see what I’m missing? Thanks

brunomeurer

Hello Mchiaelb,

I think that component expected a boolean value and you passed a integer value.
You did try construct the computed property? like this:

export default {
  data () {
    return {
      book: {'owned': 1},
      ownedOptions: [
        {label: 'We have this book', value: 1},
        {label: 'Wish list', value: 0}
      ]
    },
  computed: {
    form: {
       get () {
         return this.book.owned === 1
       },
      set (value) {
         this.book.owned = value ? 1 : 0
      }
    }
  }
}

Regards,
Bruno Meurer

michaelb

Thanks Bruno. I tried using your code and it worked fine on my local machine, but sadly not on the live site.

The docs say that the model for a q-btn-toggle “should be binded to a String in your scope” [https://quasar-framework.org/components/button-toggle.html] so I tried with a string, but still no luck.

The book object is populated from an axios call to a database. When the component first loads, the empty book is set with a default owned value of 1 / true and the button is initially toggled to reflect this, but as soon as the book object is filled the toggle button clears - when the expected action is that either one of the buttons will be highlighted depending on the underlying field value.

brunomeurer

You can simulate your problem in codepan?

I’m tryng, but its working:
codepan test

michaelb

I’ve got it sorted now - I changed the database field to a string and tested it locally but forgot to change the online db. That solved the issue. Strange that using an integer was never a problem on my dev machine…

Really appreciate your help - thanks

HLH

December 2020, the problem persists and the solution is the same, do not use values of integer type but string. If we do not want to change the data type in the DB, one option is to assign the responsibility of changing the data type to the getters and setters.

computed: {
    owned: {
      get () {
        return XXXXXX.toString()
      },
      set (value) {
        XXXXXX = parseInt(value)
      }

No More Posting New Topics!

q-btn-toggle not displaying initial value