Detecting changes in parent ref with Vue's v-modelIs this

Question

Detecting changes in parent ref with Vue's v-modelIs this

I am struggling to implement two-way binding because I can't determine if the model ref is being changed by the parent or child component.

Using watch captures all changes without any indication of the source of the change.

<script setup>
// Parent.vue

const doc = ref('');

setTimeout(() => {
    // Update this ref AND trigger watch in Child.vue
    doc.value = 'new value from parent';
}, 2000);
</script>

<template>
    <Child v-model:doc="doc" />
</template>

<script setup>
// Child.vue

const doc = defineModel('doc');

setTimeout(() => {
    // DO NOT TRIGGER WATCH ON THIS ONE!
    // But still update parent `doc` ref
    doc.value = 'new inner value';
}, 3000);

watch(doc, newValue => {
    // Catch `new value from parent` but not `new inner value`
});
</script>

javascript vue.js v-model

Answer 1

Answer №1

Employ a flag within the child component:

View on Vue SFC Playground

<script setup>
import {watch} from 'vue';
const doc = defineModel('doc');
let meChangingDoc = false;

setTimeout(() => {
    // DO NOT TRIGGER WATCH ON THIS ONE!
    // But still update parent `doc` ref
    meChangingDoc = true;
    doc.value = 'new inner value';
}, 3000);

watch(doc, newValue => {
  if(meChangingDoc) {
    meChangingDoc = false; 
    console.log('child changed doc');
    return;
  }
  console.log('parent changed doc')
  
    // Capture `new value from parent` but not `new inner value`
});
</script>

You can also utilize a generic function:

View on Vue SFC Playground

SyncRef.js

import {watch} from 'vue';
export default function syncRef(source){
  let syncing = false;
  return new Proxy(source, {
    get(_, prop){
      if(prop === 'watchSource') return function(cb){
        return watch(source, (...args) => {
          if(syncing) {syncing = false; return; }
          cb(...args);
        });
      };
      return Reflect.get(...arguments);
    }, 
    set(_, prop, val){
      if(prop === 'value'){
        syncing = true;
        source.value = val;
        return true;
      }
      return Reflect.set(...arguments);
    }
  });
}

Usage:

<script setup>
import syncRef from './SyncRef';
const model = defineModel('doc');
const doc = syncRef(model);

doc.watchSource(newValue => {
    // Catch `new value from parent` but not `new inner value`
});
</script>

Answer 2

Employ a flag within the child component:

View on Vue SFC Playground

<script setup>
import {watch} from 'vue';
const doc = defineModel('doc');
let meChangingDoc = false;

setTimeout(() => {
    // DO NOT TRIGGER WATCH ON THIS ONE!
    // But still update parent `doc` ref
    meChangingDoc = true;
    doc.value = 'new inner value';
}, 3000);

watch(doc, newValue => {
  if(meChangingDoc) {
    meChangingDoc = false; 
    console.log('child changed doc');
    return;
  }
  console.log('parent changed doc')
  
    // Capture `new value from parent` but not `new inner value`
});
</script>

You can also utilize a generic function:

View on Vue SFC Playground

SyncRef.js

import {watch} from 'vue';
export default function syncRef(source){
  let syncing = false;
  return new Proxy(source, {
    get(_, prop){
      if(prop === 'watchSource') return function(cb){
        return watch(source, (...args) => {
          if(syncing) {syncing = false; return; }
          cb(...args);
        });
      };
      return Reflect.get(...arguments);
    }, 
    set(_, prop, val){
      if(prop === 'value'){
        syncing = true;
        source.value = val;
        return true;
      }
      return Reflect.set(...arguments);
    }
  });
}

Usage:

<script setup>
import syncRef from './SyncRef';
const model = defineModel('doc');
const doc = syncRef(model);

doc.watchSource(newValue => {
    // Catch `new value from parent` but not `new inner value`
});
</script>

Answer 3

Answer №2

Utilizing v-model simplifies the process of elevating state to the parent component and enabling two-way binding. Unless there is a specific requirement, like distinguishing between updates to child and parent state, there is no need to introduce local state unnecessarily.

// Child.vue
const parentState = defineModel();
const childState = ref();

watch(
  [parentState, childState],
  ([newParentState, newChildState], [oldParentState, oldChildState]) => {
    const isInitial = newChildState == undefined;
    const isParent = 
      newChildState === oldChildState &&
      (newParentState !== newChildState);

    if (isParent || isInitial) {
      childState.value = newParentState;
      // parent-only update logic
    } else {
      parentState.value = newChildState;
      // child-only update logic
    }
  },
  { immediate: true }
);

To prevent recursive changes in such watchers, additional conditions can be implemented to avoid them when necessary.

Answer 4

Utilizing v-model simplifies the process of elevating state to the parent component and enabling two-way binding. Unless there is a specific requirement, like distinguishing between updates to child and parent state, there is no need to introduce local state unnecessarily.

// Child.vue
const parentState = defineModel();
const childState = ref();

watch(
  [parentState, childState],
  ([newParentState, newChildState], [oldParentState, oldChildState]) => {
    const isInitial = newChildState == undefined;
    const isParent = 
      newChildState === oldChildState &&
      (newParentState !== newChildState);

    if (isParent || isInitial) {
      childState.value = newParentState;
      // parent-only update logic
    } else {
      parentState.value = newChildState;
      // child-only update logic
    }
  },
  { immediate: true }
);

To prevent recursive changes in such watchers, additional conditions can be implemented to avoid them when necessary.

Answer 5

Answer №3

It is advisable to implement a flag to identify the source of the modification

<template>
  <Child v-model:doc="doc" />
</template>

<script setup>
import { ref } from 'vue';

const doc = ref('');

setTimeout(() => {
  doc.value = 'new value from parent';
}, 2000);
</script>

Additionally, here is the child.vue file for reference:

<script setup>
import { defineModel, watch, ref } from 'vue';

const doc = defineModel('doc');
const changeSource = ref('');

watch(doc, (newValue, oldValue) => {
  if (newValue !== oldValue && changeSource.value === 'parent') {
    console.log('Change from parent:', newValue);
  } else if (newValue !== oldValue && changeSource.value === 'child') {
    console.log('Change from child:', newValue);
  }
});
</script>

Answer 6

It is advisable to implement a flag to identify the source of the modification

<template>
  <Child v-model:doc="doc" />
</template>

<script setup>
import { ref } from 'vue';

const doc = ref('');

setTimeout(() => {
  doc.value = 'new value from parent';
}, 2000);
</script>

Additionally, here is the child.vue file for reference:

<script setup>
import { defineModel, watch, ref } from 'vue';

const doc = defineModel('doc');
const changeSource = ref('');

watch(doc, (newValue, oldValue) => {
  if (newValue !== oldValue && changeSource.value === 'parent') {
    console.log('Change from parent:', newValue);
  } else if (newValue !== oldValue && changeSource.value === 'child') {
    console.log('Change from child:', newValue);
  }
});
</script>

Detecting changes in parent ref with Vue's v-modelIs this

Answer №1

Answer №2

Answer №3

Similar questions

Automatically substitute a term with a clickable link

Exploring the power of Angular JS promises through ng-repeat

Ways to invoke a JavaScript function using a JSON string

Are elements in React Native PanResponder capable of being clicked?

Tips for ensuring a successful POST request using a hyperlink tag

ReactJS component disappearing behind the Navbar

Having trouble with loading JSON due to a Cross-Domain AJAX problem

What is the best way to bundle a .js file containing code with the export default syntax?

Creating a specialized Angular directive for handling input of positive numbers

Exploring the world of Django: Using model formsets with the power

Sending data retrieved asynchronously to child components' props

Is there a way to incorporate a fade-in effect when I trigger the expand function in this script?

Rendering sibling components on Multiple Select Material UI in React

Having trouble with Axios PUT request not sending complete data to the server using JavaScript

Example TypeScript code: Use the following function in Angular 5 to calculate the total by summing up the subtotals. This function multiplies the price by the quantity

Tips for Using Threejs Loaders in a React App

Transfer the data-url attribute to the jQuery ajax URL

Why is applying CSS on an li element using .css() in JQuery not functioning?

the language of regular expressions expressed in strings

Translating PCRE(PHP) regular expressions into ECMAScript(Javascript) syntax