使用 vuejs 在 js 数据上动态应用搜索过滤器

Question

I have a array list which contains column names. I want to write a search filter which will dynamically pick the value from the array and display all the rows and column. Search Filter should be with array contains column names.

Column name can be set dynamically

I have written code like below Inside script tag

Its not working.. udata value is comming as array

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
    });
    },

Answer 1

I didn't really get exactly what you need. From what I understood you need to search for column name in apidata array using a filter. If your search filter find an element of your apidata array, you want to diplay the row values corresponding to column name your search filter found. From elements you gave in your post, I don't understand what value you need to diplay and where are they supposed to come from.

Anyway, here is my try to help you. Lets suppose that you have a data object that contains the row value to display. The code below search inside the apidata array and diplay the value of the corrsponding attribute of the data object if anything has been found.

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>