Vuejs search doesn't refresh list-CodePudding

Hi I am building an app and part of that app is to search for creators according to artistName. When the listing page loads first time it shows the list of all the creators. But there is an input field when the list can be filtered according to artist name and although I can see that it returns the correct search result, the page doesn't refresh and the full list is still showing. And in the javascript console i get this error:

TypeError: Cannot read properties of null (reading 'id')

whereas the console.log in the method gives me the correct value.

Here it the input field

<input
  type="text"
  placeholder="Search by artistName"
  v-model="artistName"
/>
<button
  @click="searchArtistName"
>
  Search
</button>

And this is the function that filters the results

 data() {
   return {
     creators: [],
     currentCreator: null,
     currentIndex: -1,
     artistName: "",
     errors: [],
   };
 },
 methods: {
   searchArtistName() {
     DataService.findByArtistName(this.artistName)
       .then((response) => {
         this.creators = response.data;
         console.log(this.creators);
       })
       .catch((e) => {
         console.log(e);
       });
   },
 },

And this is what draws the list

<ul>
  <li
    :
    v-for="(item, index) in creators"
    :key="index"
    @click="setActiveCreator(item, index)"
  >
    id: {{ item.id }}, {{ item.artistName }}
  </li>
</ul>

Can anyone please tell me why this is not working?

CodePudding user response：

OK I found the answer. The problem was with the data format from the api. It was returning an object, not an array hence it could not be assigned to creators array correctly. I changed it into an Iterable object and now the list filters correctly.

CodePudding user response：

Check your response, and items

You have an item with value of null (like creator100: null),

And when you iterate through creators you get and item = null and when trying to access item.id you get this error TypeError: Cannot read properties of null (reading 'id')

use id: {{ item ? item.id : index }}, {{ item ? item.artistName : '' }} to null free in rendering and know when you get null value.

You can try null.id in Browser console to achieve a error like that.

if you wanna look deeper, expand error log in console, and attach an screenshot to question.