Vue Watch not triggering

Asked
Active3 hr before
Viewed126 times

7 Answers

90%

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive., 10 You may have to use Vue.set to update object properties, especially if adding new ones. – Andrei Nemes Oct 10 '17 at 12:38 ,Trying to use vue watch methods but it doesn't seem to trigger for some objects even with deep:true., How do the Ausgleichsmandate in Germany's Bundestag election work?

load more v
88%

Check the Vue devtools to see if the products update correctly in both components,if not, in which don’t they update?,If the products data correctly updates in devtools everywhere, and apollo isnt the issue either, then the issue probably is with the code you left out in the ProductList,If you suspect that apollo is the problem: commment out all of the apollo code and add a simple mock to created

<template>
  <div id="products">

    ...
    
    <div v-show="selectedProductType === null">
      <ProductList :products="products" />
    </div>

    ...

  </div>
</template>

export default {
  name: 'Products',
  components: {
    ProductList
  },
  props: ['storeData'],
  data: function() {
    return {
      products: [],
      selectedProductType: null
    }
  },
  apollo: {
    products() {
      return {
        variables: { id: this.storeData.id },
        query: GET_PRODUCTS,
        update(data) {
          return data.getStore.store.products
        }
      }
    }
  }
}

This component is being displayed within the following parent component:

<md-card v-if="storeData">
   <md-tabs>
      <md-tab id="products" md-label="Products">
         <Products :storeData="storeData"></Products>
      </md-tab>
   </md-tabs>
</md-card>
load more v
72%

Trying to use vue watch methods but it doesn't seem to trigger for some objects even with deep:true.,But I have a problem trying to watch the changes in that dynamic object.,In my component, I recieve an array as a prop that are the fields to create the following forms. I can build the forms and dynamicly bind them to an object called crudModelCreate and everything works fine (i see in vue dev tools and even submiting the form works according to plan),Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

But I have a problem trying to watch the changes in that dynamic object.

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>

   ...

   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }
65%

watch: {
   colors: {
      handler(newValue) {
         console.log('colors changed', newValue)
      },
      deep: true
   }
}
load more v
75%

Trying to use vue watch methods but it doesn't seem to trigger for some objects even with deep:true.,But I have a problem trying to watch the changes in that dynamic object.,In my component, I recieve an array as a prop that are the fields to create the following forms. I can build the forms and dynamicly bind them to an object called crudModelCreate and everything works fine (i see in vue dev tools and even submiting the form works according to plan),If you are using Vuetify, then you should simply use the <v-icon> component which supports both Material and Font Awesome icons: documentation

But I have a problem trying to watch the changes in that dynamic object.

  <md-input v-for="(field, rowIndex) in fields" :key="field.id" v-model="crudModelCreate[field.name]" maxlength="250"></md-input>

   ...

   data() {
      return {
         state: 1, // This gets changed somewhere in the middle and changes fine
         crudModelCreate: {},
      }
   },
   ...
   watch: {
        'state': {
            handler: function(val, oldVal) {
                this.$emit("changedState", this.state);
                // this works fine
            },
        },
        'crudModelCreate': {
            handler: function(val, oldVal) {
                console.log("beep1")
                this.$emit("updatedCreate", this.crudModelCreate);
                // This doesn't work
            },
            deep: true,
            immediate: true
        },
    }
load more v
40%

As we enter values inside any of the texboxes, whichever is changed, Watch takes care of updating both the textboxes. We do not have to specially assign any events and wait for it to change and do the extra work of validating. Watch takes care of updating the textboxes with the calculation done in the respective functions.,Let’s take a look at the output in the browser.,Let’s enter some values in the kilometers textbox and see it changing in the meters textbox and vice-versa.,In this chapter, we will learn about the Watch property. Using an example, we will see we can use the Watch property in VueJS.

Example

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         Kilometers : <input type = "text" v-model = "kilometers">
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
      </script>
   </body>
</html>
22%

On the other hand, watch tracks a specific property or properties and will only run when it changes. Also, the way that a watch method is setup, it contains the old value of the property, as well as its updated value. ,Example of watchEffect,Tips for using watchEffect,The old value of the watched property

The Vue Options API provides a watch option in which you can define your watchers. To use this, you must first have a property in your data object that you want to track. That code will look like this.

export default {
   data() {
      return {
         title: '',
         description: ''
      }
   },
   watch: {
      // your watchers will go in here!
   }
}
load more v

Other "undefined-undefined" queries related to "Vue Watch not triggering"