q-btn-toggle not displaying initial value



  • 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



  • 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



  • 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.



  • You can simulate your problem in codepan?

    I’m tryng, but its working:
    codepan test



  • 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