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

Posted 2023-02-23

【中文标题】如何在 Vue 中将此函数编写为计算属性

【英文标题】：How to write this function as a computed property in Vue

【发布时间】：2018-07-31 18:38:12

【问题描述】：

我想连接在数据中定义的固定目录路径和在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 移至方法时，它可以工作。然而，我的印象是，像这样的简单转换正是计算属性的用途。

【问题讨论】：

computeds 类似于数据属性，但它们只是派生的（正如您已经提到的）。因此，它们不能是函数。如果你需要一些需要输入参数的东西，那么你最好使用methods。否则，您可以使用一些闭包魔法来使计算返回 function，您可以在 v-for 中使用它。

我刚刚发现这个问题的答案是在 v-for 中使用计算属性是不可能的：***.com/questions/40322404/… 谢谢大家的帮助。我可以结束这个问题以支持另一个问题吗？

@kslstn 只有在 v-for 循环中不使用组件时，这是不可能的。

感谢您指出这一点。使用子组件实际上是优雅的解决方案。我很困惑，并且在父组件级别拥有计算属性。

【参考方案1】：

您收到此错误是因为您将 filePath 视为一个函数，但它作为一个值起作用。因此，您不会在这里将其称为函数：

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

如果它是计算出来的：

<ChildComponentName :src="filePath" />.

如果你想让它留在computed中，你可以尝试像这样修改你的代码（假设你可以访问tile，你很可能这样做）：

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

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

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

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

但在这种情况下，您必须有权访问此子组件内的imageDir。

【讨论】：

我试过这个，但是：“TypeError：this.tile is undefined”。 tile.image 指的是 v-for: 中的 tile，所以我不希望它可以在组件的脚本中访问。因此，我尝试将其作为论据传递。

两个选项：在ChildComponentName 中计算src 或将其移动到methods。

【参考方案2】：

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

您不能将计算值称为函数。它们没有参数。您可以将这些视为“生成的”变量。

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

【讨论】：

我认为 OP 并不需要。

【参考方案3】：

如果您使用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

【参考方案4】：

计算属性旨在创建类似于您可以在“数据”部分中创建的属性。不应该被用作方法。

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

您可以了解更多关于计算的工作原理here