Vue Watcher not working on component created with Vue.extend

Question

I have a Parent component with a select input which is bound through v-model to a variable in data.

Besides, I create child components dynamically using Vue.extend, which i pass the propsData which also includes the value of the select.

This components have a watcher for the prop that is related to the select input.

When i create the component it receives the props succesfully, The problem comes when I update the value of the select input that doesn't trigger the watcher on the child component.

I've been looking for similar situations but have not found something that helps me solve this problem, i don't know why it doesn't trigger the watcher on the child component when the select input changes.

Any help would be very preciated.

Here i create the component dynamically:

let PresupuestoFormularioVue = Vue.extend(PresupuestoFormulario)
let instance = new PresupuestoFormularioVue({
  propsData: {
    //The prop related to select input  
    seguro: this.seguro,
  }
})
instance.$mount()
this.$refs.formularioContenedor.appendChild(instance.$el)

And this is the watcher in the component which isn't working:

watch:{
  seguro:{
    handler: function( newVal ){
      console.log(newVal)
    },
  },
},

tao · Accepted Answer · 2022-02-07 01:22:18Z

2

It's not the watch that doesn't work. It's the bindings. You're assigning the current value of this.seguro, not the reactive object itself. However, a new Vue() can add this binding for you.

As a sidenote, whether PresupuestoFormulario is a Vue.extend() doesn't matter. It can be any valid VueConstructor: a Vue.extend(), Vue.component() or a valid SFC (with name and template): export default {...}.

Here's how to do it:

methods: {
  addPresupuestoFormulario() {
    const div = document.createElement('div');
    this.$el.appendChild(div);
    new Vue({
      components: { PresupuestoFormulario },
      render: h => h("presupuesto-formulario", {
        props: {
          seguro: this.seguro
        }
      }) 
    }).$mount(div)
  }
}

The <div> initially appended to the parent will get replaced upon mounting with the actual template of PresupuestoFormulario and the bindings will be set, exactly as if you had <presupuesto-formulario :seguro="seguro" /> in the parent template from the start.

The really cool part about it is that the parent component doesn't need to have PresupuestoFormulario declared in its components.

Here's a working example:

const Test = Vue.component('test', {
  template: `<div>message: {{message}}</div>`,
  props: ['message'],
  watch: {
    message: console.log
  }
})

new Vue({
  el: '#app',
  data: () => ({
    msg: "¯\\_(ツ)_/¯"
  }),
  methods: {
    addComponent() {
      const div = document.createElement("div");
      this.$el.appendChild(div);
      new Vue({
        components: {
          Test
        },
        render: h => h("test", {
          props: {
            message: this.msg
          }
        })
      }).$mount(div);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id="app">
  <input v-model="msg">
  <button @click="addComponent">Add dynamic child</button>
</div>

A separate note, about using this.$el.appendChild(). While this works when you're using a root Vue instance (a so-called Vue app), it will likely fail when using a normal Vue component, as Vue2 components are limited to having only 1 root element.
It's probably a good idea to have an empty container (e.g: <div ref="container" />) in the parent, and use this.$refs.container.appendChild() instead.

edited Feb 7, 2022 at 1:22

answered Feb 6, 2022 at 7:48

tao

91k18 gold badges136 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

isaac rivas Over a year ago

It never came to my mind that could be the binding the cause of the problem, and the fact that with new Vue() works sounds a bit odd to me. Thank you very much, it works effectively.

tao Over a year ago

It's not odd at all. Every single component is a Vue instance. Whether you see it or not, new Vue() is, internally, called on every single Vue component instance. The only thing that's changed is that instead of having the parent call it, when it parses the template and finds the component, you call it yourself and then mount it into a <div> you added to the parent yourself. Because you want it to be dynamically added. Vue doesn't create apps. it creates components. Which can contain other components. We just call the top one App, as a convention.

tony19 · Accepted Answer · 2022-07-16 01:28:19Z

2

All of props that you want check in watcher, should be a function. If you want read more about this go to vue document codegrepper.

watch: {
    // whenever seguro changes, this function will run
    seguro: function (newValue, oldValue) {
        console.log(newValue,oldValue)
    }
}

edited Jul 16, 2022 at 1:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 6, 2022 at 17:11

mahdi-abaszadeh

213 bronze badges

1 Comment

tao Over a year ago

As documented, a watch in Options API can be any function, a string matching a method name, or an options object, with { handler, immediate, deep } interface.

Collectives™ on Stack Overflow

Vue Watcher not working on component created with Vue.extend

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related