Difference in QItemSide in v0.15 - @error processing

  • in v0.14 it worked:

        <q-item v-for="(item, index) in products" :key="item.id">
          <q-item-side :image="'http://example.com/'+item.url+'.jpg'" v-if="item.url" @error="item.url=''" />
          <q-item-side image="http://example.com/220x220.png" v-else />

    in 0.15, the @error event is not processed at q-item-side context and we need to write such a bloated code for situations, when there is no image at specified url (404):

        <q-item v-for="(item, index) in products" :key="item.id">
              <q-item-tile image>
                <img class="q-item-image" :src="'http://example.com/'+item.url+'.jpg'" v-if="item.url" @error="item.url=''" />
                <img class="q-item-image" src="http://example.com/220x220.png" v-else />

    I assume @error event is not correctly processed in many other components, too.

  • Just an idea: have you tried @error.native ?

  • tried now - all versions:

    q-itemside @error -> not working
    q-itemside @error.native -> not working
    img @error -> working
    img @error.native -> not working

  • Another solution is to use such an amazingly simple component for list images, which URL’s could lead to 404. At the end of the day, frankly, I do even prefer this solution with custom image component:

        <img class="q-item-image" :src="imgsrc"  @error="setError()" v-if="imgsrc">
      <script type="text/javascript">
      export default {
        name: 'SafeImage',
        props: [
        data () {
          return {
            imgsrc: ''
        created () {
          this.imgsrc = this.src
        methods: {
          setError () {
            this.imgsrc = this.altsrc
      <style scoped>

  • Admin

    Explanation here: http://quasar-framework.org/guide/quasar-upgrade-guide.html#Some-components-need-native-modifier-for-events-now
    Dismiss the “native” modifier. What I want to emphasize here is how some components changed from functional components to regular components, including QItem & co.

  • @rstoenescu In the upgrade Docs you just mention to use
    QItem with @click=$route.push("…")

    Should change to @click.native=$route.push("…") to avoid confusion…

Log in to reply