watch changes in html element using vue

Question

I'm trying to watch HTML element in the followiing way:

 computed: {
    content(){
      return document.querySelector(".tab-content")
    }
 },
 watch: {
    content(newVal) {
      return newVal;
    }
 }

but when .tab-content changes (it's innerHTML) , vue wont track/respond to that. any idea why?

With *tab-content changes *, what do you mean? The inner html? The value? The structure? So, please share your html for the tags with class `tab-content` and clarify what kind of change you expect on it. — vahdet, Apr 22 '19 at 07:08
from my point of view, any of the changes you mentioned should cause recompute of the computed variable, but in my specific case its the innerHTML that im trying to track — yariv bar, Apr 22 '19 at 07:17
No, that's too much of magic. No framework can do that. Every handler can only be activated on an event, like DOM event. — HTN, Apr 22 '19 at 07:32
i was worried this answer might hit me..:(, though at the end of day , content is a JavaScript object, so i don't completely understand why — yariv bar, Apr 22 '19 at 07:41
Vue cannot track anything else besides objects and properties defined in the `data` option (or its store if you use a state management library) and Vue cannot absolutely watch an html element (nor any of its properties such as innerHTML) and react to that. That's not how Vue works, I don't think that's how any front-end javascript framework works. — Abana Clara, Apr 22 '19 at 08:10

score 1 · Answer 1 · answered Sep 10 '22 at 19:20

You can use MutationObserver.

It's a vanilla JS feature that lets you watch DOM element and react to the changes(aka mutations)

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord

<script setup>

let observer = null;
let target = document.querySelector(".tab-content");
let options = {
    subtree: true
    //childList: true,
    //attributes: true,
}

onMounted(() => {
  observer = new MutationObserver((mutationList, observer) => {

    //Analyse mutationList here for conditional processing
  });

  observer.observe(target, options);
});

onUnmounted(() => observer && observer.disconnect());

</script>
<template>
    <div class="tab-content"></div>
</template>

score -1 · Answer 2 · answered Apr 22 '19 at 09:10

-1

You can't watch computed values, the computed methods are already like watchers that are updated when the content changes. You use watch methods to watch for changes in data or props

export default {
    data: () => ({
        content: ''
    }),
   watch: {
       content () {
           return this.content
       }
   }
}

answered Apr 22 '19 at 09:10

decodedxclusive

401
4
8

you can watch them, and incase the change in the computed value should cause external logic, watch would be a reasonable place to do so. nonetheless, your answer is very off the question. here is a nice explanation https://stackoverflow.com/questions/41067378/watching-computed-properties – yariv bar Apr 22 '19 at 10:39

watch changes in html element using vue

2 Answers2