``The modification of an input value after it has been initially

Question

``The modification of an input value after it has been initially

I find myself in a perplexing situation where I am setting a value to an input element from a route parameter.

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

Below is the search computed function:

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

The issue that I am encountering is that when this.serviceBenefitRoute has a value, it shows up in the input box but cannot be deleted. It persists even after attempting to remove it. I have been grappling with this problem for quite some time now and my ideas are running thin.

javascript vue.js vue-router vuex

Answer 1

Answer №1

It seems like the best approach is to set the initial value of search from your route first, and then resort to using your store as a fallback.

You can achieve this with the following code snippet:

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

After that, you can simply use v-model:

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

This eliminates the need for a computed value for search.

Answer 2

It seems like the best approach is to set the initial value of search from your route first, and then resort to using your store as a fallback.

You can achieve this with the following code snippet:

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

After that, you can simply use v-model:

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

This eliminates the need for a computed value for search.

``The modification of an input value after it has been initially

Answer №1

Similar questions

Pattern matching for a string with numerous repetitions using Regular Expressions

Transferring session data through AJAX in PHP

Ionic Vue Modal displays duplicated content

Analyzing npm directive

Sorting the array in MongoDB before slicing it

The <mat-radio-button> component does not have a value accessor specified

Changing MySQL Limit arguments into numerical values

What is the best way to choose an item from a dropdown menu using JavaScript?

To grab a specific CSS attribute from a stylesheet using JavaScript

Customizing Django forms.Textarea in template or declaring in models is essential for creating a unique

What is the best way to add animation to my `<div>` elements when my website is first loaded?

The style properties of Material UI ButtonGroup are not being properly applied

Guide to defining a conditional statement in a Nuxt.js application

Get the Google review widget for your web application and easily write reviews using the Google Place API

Personalized Owl Carousel - OWL.JS Hover Pause Feature

How do I utilize Ajax to compare the value selected from a drop down menu in a form with entries in my database, and retrieve the corresponding record/row to automatically fill in a form?

Calendar: Display upcoming dates within the next week starting from the current week

Unable to load JSON information into an ExtJS grid

The code threw an error stating: "Error: Unable to set a new value to the unalterable property 'children' of the object '#<Object>'"

Is it possible to invoke a computed property within the props of a child component in Vue.js?