使用 vuejs 在 js 數據上動態應用搜索過濾器

Question

我有一個包含列名的數組列表。 我想編寫一個搜索過濾器，它將從數組中動態選擇值並顯示所有行和列。 搜索過濾器應該與數組包含列名。

列名可以動態設置

我已經編寫了如下所示的代碼 Inside script 標簽

它不起作用.. 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
    });
    },

Answer 1

我沒有真正得到你需要的東西。 據我了解，您需要使用過濾器在apidata數組中搜索列名。 如果您的搜索過濾器找到apidata數組的元素，您希望顯示與您的搜索過濾器找到的列名稱相對應的行值。 從你在帖子中給出的元素來看，我不明白你需要展示什么價值以及它們應該來自哪里。

無論如何，這是我嘗試幫助您的方法。 假設您有一個包含要顯示的行值的data對象。 下面的代碼在apidata數組中搜索，如果找到任何內容，則顯示data對象的對應屬性的值。

應用程序

<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>

搜索組件.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>