从表 vuejs、graphql、json 中搜索/过滤数据

Question

I have a table that shows the ID and title from my data. I had to pull the Title from a json which is saved in the database as a string. Now I want to filter/search in this table. I can search the IDs but not the title. I tried everthing that google showed me, but it didn't work. What Am I doing wrong?

I'm new in Vue, can anybody help me?

Code:

        <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            label="Search"
            single-line
            hide-details
        ></v-text-field>
       
        <v-data-table
          :headers="headers"
          :items="showActivatedOnly()"
          :search="search"
          sort-by="id"
          class="elevation-1"
        >....

    showActivatedOnly: function(){
      if(!this.search){
        if(this.showActivatedSurveysOnly===true){
          return this.adminSurveys
        }else{
          return this.adminSurveysOnlyActivated;
        }
      }
      return this.getAllSurveysFiltered();
    },
    getAllSurveysFiltered() {
            const surveys = this.adminSurveys;
      
      const child = surveys.filter(item => {
        let json = JSON.parse(item.json)
        return json.title.toString().toLowerCase().includes(this.search.toLowerCase())
      });
      
      console.log(child + "CHILD")
      console.log(surveys + "ALL_SURVEYS")
      
      return(child)

    },```
      

The Method getAllSurveysFiltered() response the right list but the elements aren't showing in my table.

Answer 1

The first potential problem is that you are attempting to filter results on the client side. That may be OK if the number of results is so small that you will always be able to load all of them in the client and filter them from there. But what if the search result is not matched in the first page of results, but if would have matched later pages? Then the client would incorrectly show that there are no search results.

The title of the question says you are using GraphQL, so in theory you should to be able to filter the results on the server side using a query somewhat like this:

query {
  surveys(where: { title_CONTAINS: "seachTermGoesHere" }) {
    title
  }
}

However, that example query is probably not exactly right for your use case because the query syntax depends on how your back end is implemented.

If you do end up filtering results on the client side, your filter function should be simplified. If I were you, I would also make it a computed property so that it would update based in its dependency:

computed: {
  filteredSurveys() {  
      // This assumes that adminSurveys is an array of objects
      // where each object has a `title` key
      return this.adminSurveys.filter((survey) => {
        return survey.title.toLowerCase().includes(this.search.toLowerCase())
      })
    },
}