[SOLVED] Unable to create compo:Toast but Alert works fine



  • Hello there, new to Quasar and I find it awesome !

    I am not able to create a basic Toast which is odd.

    • Created a fresh quasar repo
    • Edited “src/components/Hello.vue”
      – Import { […], Toast } from ‘quasar’
      – Added in the mounted () method the following :
      Toast.create(‘Hello World’) or Toast.create({ html: ‘Hello World’ })

    Nothing appears and the vue developer tool (chrome) doesn’t show anything in Vue instance Root
    There is no error in the console.

    I noticed that Alert({ html: ‘Hello World’ }) worked fine.

    So my question is : is there something I should specify (e.g in the Layout ?) so Toast appears ? I didn’t find anything in the documentation.
    Thanks for your help



  • There is no need to specify anything extra for Toast to show up. I think the problem is the mounted function, I’m not sure. Try:

    <template>
      <div>
        <q-btn @click="met()">Hi</q-btn>
      </div>
    </template>
    
    <script>
      import { Toast, QBtn } from 'quasar'
      export default {
        name: 'DataPoint',
        components: {
          QBtn
        },
        methods: {
          met () {
            Toast.create('hello')
          }
        }
      }
    </script>
    

    If this works, the problem is the mounted function. I think you could use:

        mounted () {
          process.nextTick(() => {
            Toast.create('Hello')
          })
        }
    

    edit: code corrected as per post below



  • Thanks for the help. Indeed, calling Toast.create in mounted() breaks somehow the component and cannot be used elsewhere afterward.

    The above solution works (corrected, use “process.nextTick”)

    mounted() {
      process.nextTick(() => {
        Toast.create('Hello World')
      }
    }
    

    Isn’t there a more elegant solution ?
    When the component is called, I want to perform some checks and display a Toast if needed. I thought mounted() was the good call.
    I know, this question is more about VueJS than quasar finally.



  • I’m pretty sure this has to do with the dom not being ready during mounted. Or something along those lines. (checked: the dom should be ready during mounted)

    Still looks like a bug to me, and if so will be fixed after v0.15 is out.

    In the meantime you should be fine with your checks during mounted, but use nextTick for Toast