Difference in QItemSide in v0.15 - @error processing

qyloxe

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-side>
          <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 />
          </q-item-tile>
        </q-item-side>

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

benoitranque

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

qyloxe

tried now - all versions:

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

qyloxe

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:

  <template>
    <img class="q-item-image" :src="imgsrc"  @error="setError()" v-if="imgsrc">
  </template>

  <script type="text/javascript">
  export default {
    name: 'SafeImage',
    props: [
      'src',
      'altsrc'
    ],
    data () {
      return {
        imgsrc: ''
      }
    },
    created () {
      this.imgsrc = this.src
    },
    methods: {
      setError () {
        this.imgsrc = this.altsrc
      }
    }
  }
  </script>
  <style scoped>
  </style>

rstoenescu

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.

marcelo

@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…

No More Posting New Topics!

Difference in QItemSide in v0.15 - @error processing