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

Question

我正在尝试使用 v-model 传递一个 id，这样我就可以将它传递给我的计算函数。我的函数的目的是动态过滤 table 而无需在函数中对名称进行硬编码。该函数必须能够过滤两个 select 框。

我的数据叫做 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 之外的函数。所有这一切的目的是让我可以在不更改任何内容的情况下重用该组件。所以它必须应用于两个 select 框，甚至在将来更多。

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

Answer 1

您可以创建一个动态筛选键，该键会根据上次选择的内容而变化 <select>:

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

export default {
  data() {
    return {
      filterKey: null
    }
  }
}

向每个 <select> 添加一个 change-event handler 以将 filterKey 设置为所需的键以用于计算道具的过滤（例如，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

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

pass certain value dynamically to computed function in Vue.js

laravel

vue.js

vue-component

vuejs3

laravel-8