VueJS Error in render: "TypeError: _vm.img.loadImg is not a function

Question

I'm having this problem and idk how fix this! Error in render:

TypeError: _vm.img.loadImg is not a function.

I wanna show the pic with a method loadImg(id), how I use this? I'm a novice in vue.

Code:

import Vue from 'vue'
import AsyncComputed from 'vue-async-computed'
Vue.use(AsyncComputed)

export default {
  name: "Sell",
  components: {
    Header
  },
  data() {
    return {
      divBar: DivBar,
      iconNext: IconNext,
      iconVaca: IconVaca,
      iconPeso: IconPeso,
      iconPreco: IconPreco,
      iconLocal: IconLocal,
      timelineItems: [],
      errorObj: {
        isSet: false
      },
      img: '',
    }
  },
  computed: {
    loadImg(id) {

      this.$http.get(this.$api + "/midiasvenda/" + id)
        .then(response => {
          if (response.success != null) {
            return response.success;
          } else {
            return Vaca
          }
        }).catch(error => {
          return error;
        })
      return Vaca;

    }
}

<template>
  <div v-else class="container-sell">
    <div v-for="item in timelineItems" :key="item.id" class="container-cow">
        <div class="left-content">
            <div class="flock-image">
                <img :src="img.loadImg(item.id)" alt="" class="cow">
            </div>
        </div>
   </div>
  </div>
</template>

Thanks for help guys!

Replace img.loadImg(item.id) with loadImg(item.id), because loadImg function doesn't exist on img. — 3142 maple
– 3142 maple, Commented Oct 31, 2018 at 14:20
the error continues: TypeError: _vm.loadImg is not a function — Douglas Marques
– Douglas Marques, Commented Oct 31, 2018 at 14:35
okay, its works, but the image is not loaded, can you help me ? — Douglas Marques
– Douglas Marques, Commented Oct 31, 2018 at 14:41

T. Dirks · Accepted Answer · 2018-10-31 14:47:43Z

The problem is with the line:

<img :src="img.loadImg(item.id)" alt="" class="cow">

Firstly you will need to change this to:

<img :src="loadImg(item.id)" alt="" class="cow">

Secondly, you can't have a computed property with a parameter. You'll need to create a method instead with the same functionality. Example:

methods: {
  loadImg(id) {
    this.$http.get(this.$api + "/midiasvenda/" + id)
      .then(response => {
        if (response.success != null) {
          return response.success;
        } else {
          return Vaca
        }
      }).catch(error => {
        return error;
      })
    return Vaca;
  }
}

Edit:

Here is a basic example

P3trur0 · Accepted Answer · 2018-10-31 14:32:34Z

0

The following line:

<img :src="img.loadImg(item.id)" alt="" class="cow">

should actually be:

<img :src="loadImg(item.id)" alt="" class="cow">

because the method loadImg(item.id)does not belong to the img data property.

answered Oct 31, 2018 at 14:32

P3trur0

3,2251 gold badge15 silver badges27 bronze badges

Collectives™ on Stack Overflow

VueJS Error in render: "TypeError: _vm.img.loadImg is not a function

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related