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

Issues with Nuxt 3's component transitions in Vue.js 3

What could be causing Next.js to throw an error upon completion of the MSAL OAuth process?

Unable to retrieve the value of a key from a node object

Browser encountering HTTP response that has been shorted extensively

The primary view seamlessly integrates with the page following the invocation of the partial view

How to change elements within an HTML string using jQuery

I am having trouble getting Form.Select to work in my basic react-bootstrap application, despite following the guidelines provided in the react-bootstrap documentation. Can

Can anyone explain to me how to render attributes of a tag in Vue? I'm curious about how v-for interacts with HTML

Verify the MAC address as the user types

Is it common practice to include a variable in a function with the same name as the function itself?

Is it possible to modify a dependency import based on the specific request?

Step by step guide on inserting a message (memo/sticky note) onto an HTML page

Is there a way to simulate a shift+click event on Vue.js elements using the browser console?

How can I extract the initial values from PHP after receiving the JSON + serialized data in the Ajax response following the first submission?

How do I customize the appearance of an Element-UI data table in Vue?

The yarn installation process is not utilizing the latest available version

Find the element that is being scrolled in order to delete its attributes

Tips for improving the scrolling function in Java with Selenium for optimal performance

Issue with an external library in Angular 2

Does Vuejs have a counterpart to LINQ?