What is the best way to monitor changes in a sublist in Vue.js or utilize

I am trying to watch a list that contains sublists, and some <input> elements can modify the sublist effectively.

<div id="app">
    <div v-for="sub in list">
        <div v-for="(v,idx) in sub">
            <input v-model="sub[idx]"/>
        </div>
    </div>
</div>
<script>
new Vue({
    el: "#app",
    data: {
        list: [['one','two']]    
    },
    watch: {
        list: funtion(){
            console.log('change')
        }
    }
})
</script>

Despite modifying the input, the watcher is not triggered.

Answer №1

Implement a deep watch functionality to monitor changes within nested elements and activate the watch event:

watch: {
   list: {
     handler() {
         console.log('change')
     },
     deep: true
   }
}

Fascinating Discovery:

In cases where the nested data belongs to any of the following categories, the watch event will not be triggered without using a deep watch:

  • array of objects (common scenario)
  • object of objects
  • object of arrays

However, for an array of arrays like in your particular code snippet, Vue is able to detect it even without a deep watch. It would have functioned correctly if the typo was corrected (as mentioned in @BorisK's response below).

This behavior may seem unexpected since we typically associate Vue with needing a deep watch to track deep changes, but it can handle an array of arrays efficiently, not just within the template.

Check out the Demo Here

Answer №2

Don't forget to replace funtion with function by adding the missing c

Make sure to test it out by clicking on "run code snippet" below

new Vue({
  el: "#app",
  data: {
    list: [
      ['one', 'two']
    ]
  },
  watch: {
    list: function() {
      console.log('change');
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div v-for="sub in list">
    <div v-for="(v,idx) in sub">
      <input v-model="sub[idx]" />
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

js expressive dynamic pattern matching

Hey there! I'm in the process of coding an online store and am currently focusing on implementing the add to cart functionality. My goal is to save product IDs and their quantities in a cookie, which will look something like this: id1:qt1,id2:qt2... I ...

What is the best way to implement a dynamic link in a Next.js Image component?

Is it possible to use a dynamic link in Next.js with the Image component? Next.js typically suggests using it like this: <Image src="/me.png" alt="Picture of the author" width={500} height={500} ...

Issue with VueJS navbar unexpected animation

I created a fixed navbar with a fade-out transition on the <router-view>. However, I noticed that when the view transitions in, the navbar also has an unwanted fade-out effect. Why is an element outside the <transition> wrapper being affected b ...

JavaScript Error: Node.js throws a TypeError when attempting to read a property 'ObjectID' from an undefined variable

I'm encountering an issue with parsing ObjectId in Node.js using MongoDB. I suspect the problem lies within the MongoDB package. Here is the error code: TypeError: Cannot read property 'ObjectID' of undefined at exports.viewerData (D:&bsol ...

Calculate the duration in seconds using the console

Is it possible to display the time of an action in seconds instead of milliseconds using console.time? Below is my code: console.log('start load cache'); console.time('cache load ok executed in') // loading from mongo console.timeEnd( ...

Checking for Three.js WebGL compatibility and then switching to traditional canvas if necessary

Is there a way to check for WebGL support in three.js and switch to a standard Canvas render if not available? I'd appreciate any insights from those who have experience with this library. ...

What could be causing TypeORM skip() and take() function to not function properly?

I have encountered a database issue with the Delivery table, which contains more than 4 million rows in MySQL. The following function, adminDeliveriesViewCount, is intended to count the total number of deliveries, but it's not functioning as expect ...

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

Utilize a helper class in Vue.js component data by calling a function from the imported module

I'm attempting to execute a JavaScript function from an imported helper class within my Vue.js component. To do this, I import the helper class into my component and try using the mounted() lifecycle hook to call the function while passing a parameter ...

The Django and Ajax like button is functioning properly, but it seems to only work on the first item

Hey there, I'm having an issue with my like button. It seems to be working only on the first item and not functioning on the rest. Here is a snippet from my views.py: @login_required @require_POST def like(request): if request.method == 'PO ...

Transforming .POST into corresponding .AJAX techniques

I'm currently attempting to convert a .post javascript call into an equivalent .ajax call in order to make it asynchronous. However, I'm running into some issues and can't seem to get it to work. The original working .post call looks like th ...

determine the proportion of the item

My function is supposed to map an object to create new keys. The new key "percent" is meant to calculate the percentage of each value of the key "data". It should be calculated as the value divided by the sum of all values. However, for some reason, it&apo ...

What is the best way to wrap the countdown numbers with <span> tags?

I have implemented the following countdown script: var clock = document.getElementById("timeleft"), tdy = new Date(1494979200000); countdown.setLabels( '| <span class="time-label">second</span>| <span class="time-label">minute< ...

JQuery - The method $(this).find() is not recognized as a valid function

I am currently working with a Material front-end that is implemented in Bootstrap. I am attempting to utilize JQuery to modify the content of a modal component: <div class="modal fade" id="formMail" tabindex="-1" rmle="dialog" aria-labelledby="formMail ...

What is the best way to link the :style attribute with object syntax and incorporate multiple background images?

I'm experiencing an issue trying to bind CSS style with the object syntax to an image. The style object includes the CSS property background which refers to multiple background images, but unfortunately, these images are not showing up. Template < ...

Am I properly preloading images with this method?

Is the following method appropriate for preloading images? I have a table that changes its background when a 'select option' is changed. On my page's body, I include: <body onload="preload();"> Within the Form on the same page, I ha ...

What is the best way to choose a distinct element from an array?

I've been working on a task to identify the unique element within an array. I've made progress and managed to solve 95% of it, but I'm encountering an issue with one particular situation. The error message reads 'expected 0 and got 1&ap ...

The measurement of a HTML window's entire content height (not just the visible viewport height)

Currently, I am attempting to determine the total height of a webpage's content, not just what is visible. In my efforts, I have managed to achieve some success in FireFox using: document.getElementsByTagName('html')[0].offsetHeight. Howeve ...

if and elsif JSON with Angular

Currently, I am working on completing a task within our project. To provide more context, I have a field with items that I must select. Once I choose an item, another field appears in which I must select additional elements. These elements need to be sen ...

The original store is loaded when the store is removed from the local storage in redux-persist

Currently, I am working with Next.js (SSR) and redux. The integration of react-persist with Next.js has been successful for me. After logging in, when the user state is updated and the value is updated in both the redux store and localStorage store. Howev ...