Javascript - 从数组中删除空项或假项

Question

I'm decoding a file using php on the server. When the response is served to the client and I'm using the v-if to loop it in my vue app I'm encountering a strange beahviour, it will loop all the items correctly and they are displayed on the screen (I'm looping images in data uri format) but inside the loop I will always get two false items so on the output I will have two blank image tags. I'm not sure if this is caused from the looped data URI but is there any way to remove the false items from the array?

This is the client code

      axios.request({
        url: 'https://localhost:3000/api/readfile', 
        method: 'GET',
        headers: {
          'Authorization': `Bearer ${this.$store.getters.userToken}`
        },
        data: formData
      }).then( (response) => {
        console.log(response);
        response.data.master_file.forEach( (item) => {
          console.log(item);
          this.payload.push(item);
        });
        this.step++;
        this.isLoading = false;
      });

Answer 1

You can wrap the Array.push() in an if statement to avoid adding false items.

axios.request({
url: 'https://localhost:3000/api/readfile', 
method: 'GET',
headers: {
  'Authorization': `Bearer ${this.$store.getters.userToken}`
},
data: formData
}).then( (response) => {
    console.log(response);
    response.data.master_file.forEach( (item) => {
      console.log(item);
      if (item) {
        this.payload.push(item);
      }
    });
    this.step++;
    this.isLoading = false;
  });