Question

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

列名可以动态设置

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

它不起作用。.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对象相应属性的值。

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>

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

1 个答案: