Step-by-Step Guide on Monitoring alterations within a division in Vue 3

Question

Step-by-Step Guide on Monitoring alterations within a division in Vue 3

Is there a way to monitor changes such as class modifications or text updates within a div using Vue 3?

from:

<p class="font-bold">My text</p>

to:

<p class="font-bold color-red">My updated text.</p>

I attempted to use the watch method in Vue 3 but it does not track changes within a div.

watch(myDiv, (newValue, oldValue) => {
// This code is not effective for monitoring changes within myDiv.
})

javascript vue.js vuejs3 watch

Answer 1

Answer №1

When creating a SFC component, you can include your paragraph text and use a hook like onUpdated to catch every change.

onUpdated(() => {
  console.log('updating');
});

For example, you can see how it works here: https://stackblitz.com/edit/vue-5qtyjg

Answer 2

When creating a SFC component, you can include your paragraph text and use a hook like onUpdated to catch every change.

onUpdated(() => {
  console.log('updating');
});

For example, you can see how it works here: https://stackblitz.com/edit/vue-5qtyjg

Answer 3

Answer №2

Before you can watch certain properties, you must first bind them, such as

<p :class="classes">{{ text }}</p>

. Additionally, you have the option of using a MutationObserver:

const {ref, onMounted, onBeforeUnmount} = Vue
const app = Vue.createApp({
  data() {
    return {
      text: 'My text',
      classes: 'font-bold'
    };
  },
  watch: {
    text(newValue, oldValue)  {
      console.log(newValue)
    },
    classes(newValue, oldValue)  {
      console.log(newValue)
    }
  },
  methods: {
    addClass() {
      this.classes = 'font-bold color-red'
    }
  },
  setup() {
    let observer = null
    let target = ref(null)
    let options = {subtree: true, childList: true, attributes: true}
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === 'childList') {
          console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
          console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
    onMounted(() => {
      target = document.querySelector(".mydiv")
      observer = new MutationObserver(callback);
      observer.observe(target, options);
    });
    onBeforeUnmount(() => observer.disconnect())
  },
})
app.mount('#demo')

.color-red {
  color: red;
}
.font-bold {
  font-weight: 700;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <p class="mydiv" :class="classes">{{ text }}</p>
  <input v-model="text" />
  <button @click="addClass">class</button>
</div>

Answer 4

Before you can watch certain properties, you must first bind them, such as

<p :class="classes">{{ text }}</p>

. Additionally, you have the option of using a MutationObserver:

const {ref, onMounted, onBeforeUnmount} = Vue
const app = Vue.createApp({
  data() {
    return {
      text: 'My text',
      classes: 'font-bold'
    };
  },
  watch: {
    text(newValue, oldValue)  {
      console.log(newValue)
    },
    classes(newValue, oldValue)  {
      console.log(newValue)
    }
  },
  methods: {
    addClass() {
      this.classes = 'font-bold color-red'
    }
  },
  setup() {
    let observer = null
    let target = ref(null)
    let options = {subtree: true, childList: true, attributes: true}
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
        if (mutation.type === 'childList') {
          console.log('A child node has been added or removed.');
        } else if (mutation.type === 'attributes') {
          console.log(`The ${mutation.attributeName} attribute was modified.`);
        }
      }
    };
    onMounted(() => {
      target = document.querySelector(".mydiv")
      observer = new MutationObserver(callback);
      observer.observe(target, options);
    });
    onBeforeUnmount(() => observer.disconnect())
  },
})
app.mount('#demo')

.color-red {
  color: red;
}
.font-bold {
  font-weight: 700;
}

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <p class="mydiv" :class="classes">{{ text }}</p>
  <input v-model="text" />
  <button @click="addClass">class</button>
</div>

Answer 5

Answer №3

With Vue3, utilizing refs in templates is now possible. For more information, refer to the documentation.

<p ref="myDiv" class="test">{{text}}</p>

It is now feasible to define them in the template. The DOM element will be stored in myDiv.value

const myDiv = ref(null)
const text= computed(() => {
  if(myDiv.value.classList ... rest of your logic for checking classes)
  return "Text"
  else return "Updated Text"
})

Answer 6

With Vue3, utilizing refs in templates is now possible. For more information, refer to the documentation.

<p ref="myDiv" class="test">{{text}}</p>

It is now feasible to define them in the template. The DOM element will be stored in myDiv.value

const myDiv = ref(null)
const text= computed(() => {
  if(myDiv.value.classList ... rest of your logic for checking classes)
  return "Text"
  else return "Updated Text"
})

Step-by-Step Guide on Monitoring alterations within a division in Vue 3

Answer №1

Answer №2

Answer №3

Similar questions

I am unable to display my JSON data in Next.js using a fetch request

Prevent users from navigating back in their browser with jQuery

Starting http-server in the background using an npm script

Having difficulty viewing the images clearly

Encountering an issue with Angular directive attributes

Dealing with the error "Type 'date[]' is not assignable to type '[date?, date?]' in a React hook

A method that sorts an array of objects based on their properties

Having difficulty adding multiple items to the state array

Overriding filters in AngularJS and injecting dependencies into modules

Upgrade jQuery visibility and opacity animations to pure JavaScript for a more lightweight solution

Is it possible to import multiple versions of a JavaScript file using HTML and JavaScript?

p5.js experiencing issue: Uncaught TypeError - Unable to access property 'transpose3x3' due to null value

Why does the request for server parameter 'occupation=01%02' function correctly, while 'occupation=01%2C02' or 'occupation=01&occupation=02' result in an error?

Building an API using .Net Core paired with a captivating VUE spa

Creating and dynamically updating identical state using a single method in React

Increase the space below the footer on the Facebook page to allow for an

Tips for finding the correct file path for a .js file when utilizing the require function

Is there a way to assign a null value to an empty material UI text field when submitting the form, rather than an empty string?

Navigating through an array in Pug

Ways to display multiple select options based on the user's selection of multiple choices and ensure they remain hidden and reset when deselected with the use of