使用 vuejs 对 js 数据动态应用搜索过滤器答案

【问题标题】：Dynamically apply search filter on js data using vuejs使用 vuejs 对 js 数据动态应用搜索过滤器
【发布时间】：2019-06-21 07:02:53
【问题描述】：

我有一个包含列名的数组列表。我想编写一个搜索过滤器，它将动态地从数组中选择值并显示所有行和列。搜索过滤器应与数组包含列名。

列名可以动态设置

我编写了如下代码脚本标签内

它不工作.. udata 值作为数组来

export default {
    el: '#apicall',
    mixins: [Vue2Filters.mixin],
    data()
    {
    return {
    toggle: false,
    userData: [],
    search: "",
    apidata: ['Id', 'Name', 'Version'],
    currentvalue: '',
    }
    computed:
    {
    filteruserData: function(){
    var self = this;
    var list =[];

    return this.userData.filter((udata) => {

    for(var i in self.apidata)
    {
    list.push(udata[self.apidata[i]])
    }
    return list.toLowerCase().indexOf(self.search.toLowerCase()) != -1
    });
    },

【问题讨论】：

请写一些代码。
我已经添加了代码...请检查
我想对特定列使用搜索操作，如 apidata

标签： vue.js vuejs2 vue-component vue-filter

【解决方案1】：

我并没有真正得到你需要的东西。据我了解，您需要使用过滤器在 apidata 数组中搜索列名。如果您的搜索过滤器找到您的 apidata 数组的元素，您希望显示与您的搜索过滤器找到的列名对应的行值。根据您在帖子中提供的元素，我不明白您需要展示什么价值以及它们应该来自哪里。

无论如何，这是我的尝试来帮助你。假设您有一个 data 对象，其中包含要显示的行值。下面的代码在apidata 数组中搜索，如果找到任何东西，则显示data 对象的对应属性的值。

App.vue

<template>
  <div id="app"><searchCompoenent :data="data"></searchCompoenent></div>
</template>

<script>
import searchCompoenent from "./components/searchComponent.vue";

export default {
  name: "App",
  data() {
    return {
      data: {
        Id: [1, 9, 2, 3, 4, 5],
        Name: ["name1", "name2"],
        Version: ["2.0", "1.0.0", "1.1-beta"]
      }
    };
  },
  components: {
    searchCompoenent
  }
};
</script>

searchComponent.vue

<template>
  <div>
    <input v-model="search" placeholder="Search..." type="text" />
    <button type="button" @click="searchColumn">Search!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      apidata: ["Id", "Name", "Version"]
    };
  },
  props: ["data"],
  methods: {
    searchColumn() {
      let result = this.apidata.find(element => {
        return element === this.search;
      });
      if (result !== undefined) {
        console.log(result);
        console.log(this.data);
      }
    }
  }
};
</script>

【讨论】：