[Vuejs]-How to write this function as a computed property in Vue

by

4đź‘Ť

âś…

You are getting this error because you treat filePath as a function, but it works as a value. Thus, you don’t call it as a function here: 

<ChildComponentName :src="filePath(tile.image)" />

If it is computed you do: 

<ChildComponentName :src="filePath" />.

To make it work you can try to modify your code like this (assuming you have the access to tile, which you most likely do) if you want it to stay in computed: 

computed:{
    filePath(){
        return this.imageDir + this.tile.image;
    }
}

Otherwise, move it to the methods, as Phil mentioned in his answer.

UPD: If you don’t have access to this.tile you can calculate full file path inside the ChildComponentName:

computed:{
    filePath(){
        return this.imageDir + this.src;
    }
}

But in such case you would have to have an access to imageDir inside this child component.

👤oniondomes

0đź‘Ť

You can change computed into methods and pass your image as parameter.

You can’t call computed values as functions. They have no parameters. You can think of these as "generated" variables.

Docs: https://v2.vuejs.org/v2/guide/computed.html#Basic-Example

👤Philip

0đź‘Ť

Computed properties are meant to create a property like the ones you can create in the “data” section. There are not supposed to be used as methods.

Actually Vue.js is using Javascript “defineProperty” methods who creates a property in the object, that’s why you can call your computed properties like this : vm.myProperty and not like this vm.myProperty(). If we follow what you are trying to do, you are expecting your computed to create a property for each value of your v-for.

You can learn more about how computed works here

👤Julien Hery

0đź‘Ť

If you used computed, the html should be like:src="filePath" because the function you defined in the computed is a getter function.

data: function(){
  return{
    imageDir: '../assets/images/tiles/'
  }
},

computed:{

  filePath: function(){
    let path = this.imageDir + this.tile.image;//or other 
    return path
  }
}

<ChildComponentName :src="filePath" />

if you use methods,you can use your code.filePath(tile.image) means invoke the filePath function and pass the argumenttile.image

👤xianshenglu

Leave a comment