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 puted property, I get:

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

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

puted:{

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

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

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 puted property, I get:

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

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

puted:{

  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 puted properties are for.

• javascript
• vue.js
• vuejs2

• puteds 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 puted return a function which you can use in v-for. – trk Commented Feb 21, 2018 at 9:06
• I just found this question with the answer that using puted properties in v-for is not possible: stackoverflow./questions/40322404/… Thank you for your help, everybody. Can I close this question in favor of the other one? – kslstn Commented Feb 21, 2018 at 9:20
• @kslstn it's not possible only if you don't use ponents inside v-for loop. – oniondomes Commented Feb 21, 2018 at 9:53
• Thank you for pointing that out. Using a child ponent is actually the elegant solution. I got confused and had the puted property at the parent ponent level. – kslstn Commented Feb 21, 2018 at 9:58

4 Answers 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 puted 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 puted:

puted:{
    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:

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

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

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 puted properties like this : vm.myProperty and not like this vm.myProperty(). If we follow what you are trying to do, you are expecting your puted to create a property for each value of your v-for.

You can learn more about how puted works here

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

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

puted:{

  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

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

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

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