Динамически применять фильтр поиска к данным JS, используя Vuejs - PullRequest
Новая
       20

Динамически применять фильтр поиска к данным JS, используя Vuejs

0 голосов
/ 28 января 2019

У меня есть список массивов, который содержит имена столбцов.Я хочу написать поисковый фильтр, который будет динамически выбирать значение из массива и отображать все строки и столбцы.Фильтр поиска должен быть с массивом, содержащим имена столбцов.

Имя столбца может быть установлено динамически

Я написал код, как показано ниже Внутри тега сценария

Его не работает .. Значение 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
    });
    },

1 Ответ

0 голосов
/ 29 января 2019

Я не совсем понял, что вам нужно.Из того, что я понял, вам нужно искать имя столбца в массиве 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>
...