``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

Executing a function in JavaScript using square brackets

Generating numerous responses in Node (sails js) from a solitary function

Can data be transferred between browsers, such as from Google Chrome to Mozilla Firefox?

Executing multiple AJAX calls at the same time in PHP

Acquiring the content of elements contained within a div container

What is the correct way to integrate HTML input elements into JavaScript code without encountering a type error?

Can the AngularJS icon adapt to different lists?

Traverse through the loop with React Material UI in JavaScript

What is the best method for saving Vue's `prototype.$something` in a distinct file?

The use of Angular's ngClass directive does not work within the link function

Utilizing the "each" function in jQuery to create click events for buttons that are linked to specific paragraphs

Load an image dynamically within a JavaScript function

Changes in query parameters on NextJS navigation within the same page do not activate hooks

The d3 hierarchy possesses the capability to compute the average values of child nodes

When the page loads, should the information be transmitted in JSON format or should PHP be responsible for formatting it?

Responsive design involves ensuring that web elements such as divs are properly aligned

How to address additional attributes received from the server in Next.JS

The problem with Ajax POST is occurring in Firefox and Chrome, but not in IE8

Convert JavaScript code to Google Appscript

Troubleshooting: Why isn't my CSS fixed position working for my sticky