Question

我希望将数据中定义的固定目录路径与v-for中定义的文件名连接起来。当我尝试使用计算属性时，我得到：

“TypeError：_vm.filePath不是函数”。

data: function(){
  return{
    imageDir: '../assets/images/tiles/'
  }
},

computed:{

  filePath: function(fileName){
    let path = this.imageDir + fileName
    return path
  }
}

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

当我将filePath移动到方法时，它可以正常工作。然而，我的印象是像这样的简单变换正是计算属性的用途。

Answer 1

您收到此错误是因为您将filePath视为一项功能，但它可用作值。因此，您不能将其称为函数：

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

如果计算出来，你可以：

<ChildComponentName :src="filePath" />.

要使其正常运行，您可以尝试像这样修改您的代码（假设您有权访问tile，您最有可能这样做），如果您希望它保留在computed：

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

否则，将其移至methods，正如菲尔在答案中提到的那样。

UPD：如果您无法访问this.tile，则可以在ChildComponentName内计算完整文件路径：

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

但在这种情况下，您必须能够访问此子组件中的imageDir。

Answer 2

您可以将computed更改为methods并将图片作为参数传递。

您无法将计算值作为函数调用。他们没有参数。您可以将这些视为＆＃34;生成＆＃34;变量

文档：https://vuejs.org/v2/guide/computed.html#Basic-Example

Answer 3

计算属性用于创建属性，例如您可以在＆＃34;数据＆＃34;中创建的属性。部分。不应该用作方法。

实际上Vue.js正在使用Javascript＆＃34; defineProperty＆＃34;在对象中创建属性的方法，这就是为什么你可以像这样调用你的计算属性：vm.myProperty而不是像这个vm.myProperty（）。如果我们按照您要执行的操作，您希望您的计算机为您的v-for的每个值创建一个属性。

您可以详细了解计算机的工作原理here

Answer 4

如果您使用computed，则html应该与:src="filePath"类似，因为您在computed中定义的功能是getter功能。

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

computed:{

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

<ChildComponentName :src="filePath" />

如果您使用methods，则可以使用您的代码。filePath(tile.image)表示调用filePath函数并传递参数tile.image

如何在Vue中将此函数写为计算属性

4 个答案: