将某个值动态传递给 Vue.js 中的计算函数

Posted 2023-02-23

【中文标题】将某个值动态传递给 Vue.js 中的计算函数

【英文标题】：pass certain value dynamically to computed function in Vue.js

【发布时间】：2021-08-16 11:06:09

【问题描述】：

我试图通过 v-model 传递一个 id，这样我就可以将它传递给我的计算函数。我的函数的目的是动态过滤表而不对函数中的名称进行硬编码。该函数必须能够过滤两个选择框。

我的数据称为guides，它有一个title/active/language_id/group。

这是我的 html 下拉列表：

    <select v-model="filterResult" :id="language.id" class="select2-selection custom-select">
          <option value="">All</option>
          <option v-for="language in languages" v-bind:key="language.id" v-bind:value="language.id"> language.name </option>
    </select>

    <select v-model="filterResult" :id="active" class="select2-selection custom-select">
       <option value="">All</option>
       <option :value=1>Active</option>
       <option :value=2>Archived</option>
    </select>

这是我现在的计算函数，但您可以看到 "language.id" 是硬编码的，但我希望函数从 <select> 中读取它强>。我尝试将其放入 :id="" 但我不知道将其转发到 v-model 之外的功能。 这一切的目的就是如此我可以重用该组件而无需更改任何内容。所以它必须应用于两个选择框，甚至将来更多。

    filterCertainValue: function (evt) 
        if (!this.filterResult) return this.guides;
        return this.guides.filter(guide => 
            if (guide.language.id == this.filterResult) 
                return guide.language.id;
            
        )
    ,

【问题讨论】：

我没有任何错误或问题。问题是我没有经验，不知道如何得到我想要的。正如您的演示所示，您现在有一个用于语言的选择框，假设我在该选择框下方有另一个选择框用于“活动”而不是“语言 ID”。我想要的是我可以使用 vue 函数来应用它们，但现在不可能，因为你可以看到函数说返回 language.id。但我希望在触摸选择框时返回改变。

@tony19 codesandbox.io/s/…

【参考方案1】：

您可以创建一个动态过滤键，该键会根据上次选择的<select> 发生变化：

创建一个data property（命名为"filterKey"）：

export default 
  data() 
    return 
      filterKey: null
    
  

将change-event handler 添加到每个<select> 以将filterKey 设置为在计算的prop 的过滤中使用的所需键（例如，language_id 或active）：

<select @change="filterKey = 'language_id'">
  <!-- language_id options -->
</select>

<select @change="filterKey = 'active'">
  <!-- active options -->
</select>

更新计算道具的过滤器以使用filterKey：

computed: 
  filterCertainValue() 
    if (!this.filterResult) return this.guides
                                                ?
    return this.guides.filter(guide => guide[this.filterKey] === this.filterResult)
  
,

demo