Changing input value once assigned

Question

I am in a confusing situation, I am assigning a value to input element, from route param

<input type="search" class="form-control search-control" :value="search">

And the search computed function

computed: {
  search() {
    if(this.serviceBenefitRoute) {
      return this.serviceBenefitRoute;
    }
    return this.$store.state.search;
  }
}

The problem I am facing is that when this.serviceBenefitRoute has a value it gets shown in input box but it cannot be deleted, it keeps staying, I try to remove but it comes back again. I am stuck with this problem for quite long and running out of ideas.

Answer 1

Sounds like you want to set the initial value of search first from your route, then falling back to your store.

You should be able to use this

data () {
  return {
    search: this.$route.params.service || this.$store.state.search
  }
}

and then use v-model

<input type="search"
       class="form-control search-control" 
       v-model="search">

You do not need a computed value for search.