How to write this function as a computed property in Vue

Question

I want to concatenate a fixed directory path, defined in data, with a file name defined in v-for. When I try to do so with a computed property, I get:

"TypeError: _vm.filePath is not a function".

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

computed:{

  filePath: function(fileName){
    let path = this.imageDir + fileName
    return path
  }
}

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

When I move filePath to the methods, it works. However, it was my impression that simple transforms like these are exactly what computed properties are for.

`computed`s are similar to data properties but they are just derived (as you have already mentioned). Therefore, they cannot be functions. If you need something that needs to take an input parameter then you are better off using `methods`. Else, you can use some closure magic to make computed return a `function` which you can use in `v-for`. — trk, Feb 21 '18 at 09:06
I just found this question with the answer that using computed properties in v-for is not possible: https://stackoverflow.com/questions/40322404/vuejs-how-can-i-use-computed-property-with-v-for Thank you for your help, everybody. Can I close this question in favor of the other one? — kslstn, Feb 21 '18 at 09:20
@kslstn it's not possible only if you don't use components inside `v-for` loop. — oniondomes, Feb 21 '18 at 09:53
Thank you for pointing that out. Using a child component is actually the elegant solution. I got confused and had the computed property at the parent component level. — kslstn, Feb 21 '18 at 09:58

oniondomes · Accepted Answer · 2018-02-21T09:39:34.737

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.

I tried this, but: "TypeError: this.tile is undefined". tile.image refers to the tile in v-for:
Two options: compute `src` inside `ChildComponentName` or move it to the `methods`. — oniondomes, Feb 21 '18 at 09:19

score 0 · Answer 2 · edited Jul 15 '22 at 02:00

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

edited Jul 15 '22 at 02:00

tony19

125,647
18
229
307

answered Feb 21 '18 at 08:58

Philip

3,486
1
24
37

I would assume OP doesn't really have to. – oniondomes Feb 21 '18 at 09:07

score 0 · Answer 3 · answered Feb 21 '18 at 09:02

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

score 0 · Answer 4 · answered Feb 21 '18 at 09:06

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

How to write this function as a computed property in Vue

4 Answers4