[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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.