How can I rerender my vue template after changing v-for list?

Question

So I'm trying to change a list based on a whether the elements are considered active or not. I do this through a computed data array. Basically a Search Function. However my template does not rerender and update automatically, even though I try to force it with this.forceUpdate().

This is my v-for in template:

<ion-list>
        <div v-for="project in activeProjects" :key="project">
          <ion-item v-if="checkemail!=project.creator">
            <ion-button @click="openProjectPage(project.id)">{{ project.name }}</ion-button>
          </ion-item>
      </div>
</ion-list>

This is my computed array. The Log returns the correct things.

computed: {
    activeProjects: function() {
      return this.myprojects.filter(function(u){
        console.log(u);
        return u.active
      })
    }
  }

And this is where I update the activity. The Log also returns the correct things.

search: function(){
    for(var i=0; i<this.myprojects.length; i++){
      if(this.myprojects[i].name.includes(this.searchinput)){
        this.myprojects[i].active=true;
        console.log(this.myprojects[i])
      }

    }

    this.$forceUpdate();
  }

Grateful for any help

Answer 1

I understand what you're attempting with the $forceUpdate, but I'm not certain that's the intended behavior here. In particular, by directly modifying the property of an Object in an Array, I believe Vue is missing the changes completely, so it doesn't know what to forceUpdate.

(See these links to read more on when Vue does / doesn't recognize mutations to Objects and Arrays)

TBH I've never attempted to use forceUpdate in this way, but I have done some Array mutation in a spreadsheet-like scenario before and it was a pain... I would avoid it if at all possible.

Rather than modifying a property in the array, I'd compute the filter on-the-fly using a method. You should get the reactivity you want because you're calculating, not mutating, the properties of the list of projects.

<script>
export default {
  props: ['myprojects'],

  data() {
    return {
      searchinput: ''
    }
  },

  computed: {
    activeProjects() {
      return this.myprojects.filter(this.isInSearch)
    }
  },

  methods: {
    isInSearch(project) {
      return project.name.includes(this.searchinput)
    }
  }
}
</script>