Identify whether the Vue model change was initiated by user input or programmatically

Question

Identify whether the Vue model change was initiated by user input or programmatically

I am facing an issue with Vue's reactivity when using a custom component in Quasar 2. Let me explain the scenario:

The custom component includes two radio buttons and a select dropdown.
Whenever the user changes one of the radio selections, the select dropdown is automatically reset to null.

Everything works as expected up to this point. However, there is a button that allows the user to overwrite all selections with new values for both the radio buttons and the select dropdown. The problem arises here: When this button is clicked, it replaces the v-model for the component, triggering the watcher for the radio buttons and resetting the select dropdown.

For example:
If the user selects "Domestic" and "Option 1", then clicks the "Overwrite" button, the expected outcome should be "International" with "Option 2". But due to the watcher firing, "Option 2" gets reset.

You can view a demo on StackBlitz:
demo

javascript vue.js vuejs3 quasar-framework

Answer 1

Answer №1

To enable the overwrite feature, simply trigger it on button click:

function toggleOverwrite() {
  data.value = {
    status: 'activated',
    category: 'Category B',
    overwrite: true
  };
}

To disable the feature, watch for changes and reset it accordingly:

watch(
  () => localData.value.status,
    (newStatus, oldStatus) => {
      if (newStatus !== oldStatus && !localData.value.overwrite) {
        localData.value.category = null;
      } 
      localData.value.overwrite = false
  }
);

In the context of a q-radio element named domestic:

<q-radio 
  v-model="localData.status" 
  val="domestic" 
  label="Domestic"   
  @click="localData.overwrite = false" 
/>

VIEW DEMO

Answer 2

To enable the overwrite feature, simply trigger it on button click:

function toggleOverwrite() {
  data.value = {
    status: 'activated',
    category: 'Category B',
    overwrite: true
  };
}

To disable the feature, watch for changes and reset it accordingly:

watch(
  () => localData.value.status,
    (newStatus, oldStatus) => {
      if (newStatus !== oldStatus && !localData.value.overwrite) {
        localData.value.category = null;
      } 
      localData.value.overwrite = false
  }
);

In the context of a q-radio element named domestic:

<q-radio 
  v-model="localData.status" 
  val="domestic" 
  label="Domestic"   
  @click="localData.overwrite = false" 
/>

VIEW DEMO

Identify whether the Vue model change was initiated by user input or programmatically

Answer №1

Similar questions

The use of async components in Vue.js with named imports

Discover instances of a string within an array using JQuery

Using JQuery to enable the movement of divs on a screen through clicking and dragging, without the use of

Modify and improve promise and promise.all using the async/await feature of ES2017

Activate a change or response when the input value in Javascript is altered

webgl renderer for cytoscape.js

How can I make tooltipster display tooltips properly?

No change in the element's text content when clicking

Can someone please provide instructions on how to customize the textfield caret using JavaScript?

Using jQuery to load content with a dynamic variable instead of specific element IDs

What is the best way to extract the JSON value from my API website and assign it to a new variable

Modify the BehaviorSubject upon clicking or focusing on the input

I encountered an error while trying to load the resource from http://premieroptie.nl/wp-content/themes/theme51771/favicon.ico: net::ERR_NAME_NOT_RESOLVED

Utilize JavaScript to load images at random within a Qualtrics loop and merge block

Is there a way to populate an array with Twilio fax results and then successfully send them via Express?

Issue with creating a variable name inside a JavaScript for loop

In what way can data be retrieved from within a useEffect block externally?

Use jQuery to retrieve the number of items that have been selected in an ASP ListBox

transfer information from a Node.js server to an Angular client using the get() method

Alter attribute with an impact